angular 反应式表单抛出 "Cannot find control with name" 不相关的模型字段

Question

我正在尝试使用 Angular 响应式表单构建一个编辑组件。但是，我收到错误 "Error: Cannot find form control with name: created."，"created" 在我的模型上是属性。

但是，created 不是可编辑字段，不应绑定到表单。我没有在我的表单生成器中指定它，我的 edit.html 页面上也没有控件。它只出现在我的模型上。我如何告诉表单验证器忽略这个和其他不相关的模型属性？

这是我的模型：

        export class User {
      id: number;
      userName: string;
      password: string;
      passwordHash: string;
      lastName: string;
      firstName: string;
      email: string;
      created: string;
      lastLogin: string;
      description: string;
      isSaved: boolean;
      passsword:string;
      passwordConfirm:string;
    }

这是我的组件：

    import { Component, OnInit, Inject } from '@angular/core';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { first } from "rxjs/operators";
import { User } from "../../model/user.model";
import { UserService } from "../../service/user.service";


@Component({
  selector: 'app-edit-user',
  templateUrl: './edit-user.component.html',
  styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {

  user: User;
  editForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) { }

  ngOnInit() {
    let userId = window.localStorage.getItem("editUserId");
    if (!userId) {
      alert("Invalid action.")
      this.router.navigate(['list-user']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [''],
      userName: ['', Validators.required],
      password: ['', Validators.required],
      passwordConfirm: ['', Validators.required],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.email],
      description: [''],
    });
    this.userService.getUserById(+userId)
      .subscribe(data => {
        this.editForm.setValue(data);
      });
  }

  onSubmit() {

    if(!this.editForm.value.passwordConfirm){
      console.log("password confirmed is undefined. Setting");
      this.editForm.value.passwordConfirm = this.editForm.value.password;
    }

    this.userService.updateUser(this.editForm.value)
      .pipe(first())
      .subscribe(
        data => {
          alert('User updated successfully.');
          this.router.navigate(['list-user']);
        },
        error => {
          alert("En error occured and changes should not be saved. Details: " + error);
        });
  }
}

这是我的 html:

        <div class="col-md-6 user-container">
          <h2 class="text-center">Edit User</h2>
          <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

            <div class="hidden" style="display:none;">
              <input type="text" formControlName="id" placeholder="id" name="id" class="form-control" id="id">
            </div>

            <!-- todo: replace display none with bootstrap class -->

            <div class="form-group" style="display:none;">
              <input type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control"
                id="userName" readonly="true">
            </div>

            <div class="form-group">
              <label for="firstName">First Name:</label>
              <input formControlName="firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">
            </div>

            <div class="form-group">
              <label for="lastName">Last Name:</label>
              <input formControlName="lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">
            </div>

            <div class="form-group">
              <label for="email">Email:</label>
              <input formControlName="email" placeholder="email" name="email" class="form-control" id="email">
            </div>

            <div class="form-group">
              <label for="description">Description:</label>
              <input formControlName="description" placeholder="Description" name="description" class="form-control"
                id="description">
            </div>

            <hr>

            <h5>Change password</h5>

            <div class="form-group">
              <label for="password">New password:</label>
              <input type="password" formControlName="password" placeholder="password" name="password" class="form-control"
                id="password">
            </div>

            <div class="form-group">
              <label for="passwordConfirm">Confirm password:</label>
              <input type="password" formControlName="passwordConfirm" placeholder="passwordConfirm" name="passwordConfirm"
                class="form-control" id="passwordConfirm">
            </div>

            <button class="btn btn-success">Update</button>
          </form>
        </div>

错误详情如下：

错误：找不到名称为：已创建的表单控件。 core.js:5847 留言："Cannot find form control with name: created." 堆栈："Error: Cannot find form control with name: created.\n at FormGroup._throwIfControlMissing (https://localhost:5001/vendor.js:70056:19)\n at https://localhost:5001/vendor.js:69913:19\n at Array.forEach ()\n at FormGroup.setValue (https://localhost:5001/vendor.js:69912:28)\n at SafeSubscriber._next (https://localhost:5001/main.js:1937:28)\n at SafeSubscriber.__tryOrUnsub (https://localhost:5001/vendor.js:95425:16)\n at SafeSubscriber.next (https://localhost:5001/vendor.js:95363:22)\n at Subscriber._next (https://localhost:5001/vendor.js:95309:26)\n at Subscriber.next (https://localhost:5001/vendor.js:95286:18)\n at MapSubscriber._next (https://localhost:5001/vendor.js:100330:26)"

Answer 1

您似乎想将一个 User 对象设置到表单中，该表单没有名为 created 的控件。

您要么从传递给 setValue 的对象中删除该字段，要么不使用 setValue 而使用 patchValue，这似乎忽略了未知字段，并且只涉及那些在传入的对象中指定的控件并单独保留其他控件，而不是 setValue，它重置那些未在传入的对象中指定的控件。

Answer 2

Angular 反应式表单只接受表单生成器中存在的那些值，如果对象中有一些额外的属性，您正在使用它来设置值，它会给出错误属性 .在这里，你有额外的 created，如果你以某种方式解决了那个错误，它会再次给 lastLogin 错误，因为它不是表单构建器的一部分。

this.userService.getUserById(+userId)
  .subscribe(data => {
   const propertyToSelect = ['id','userName', 'password','passwordConfirm', 'firstName', 'lastName','email', 'description']
   const objectToSetValue = propertyToSelect.map((property) => {property: data[property]})
   this.editForm.setValue(objectToSetValue);
  });

angular 反应式表单抛出 "Cannot find control with name" 不相关的模型字段

angular reactive form throws "Cannot find control with name" for irrelevant model field

javascript

angular

typescript

angular-reactive-forms

form-control