（Angular 5）错误：找不到具有名称的表单控件：

Question

我正在尝试编辑一个表单，当我想显示要编辑的值时，使用 setValue 我收到一个错误“ERROR 错误：找不到带有名称的表单控件：购买。”

component.ts

ngOnInit() {
  this.form = new FormGroup({
      customer: new FormGroup({
        name: new FormControl(),
        lastname: new FormControl(),
        address: new FormControl(),
        phone: new FormControl()
      }),
      createdAt: new FormControl(),
      purchases: new FormArray([])
  });
}

我的编辑功能

onEdit(invoice) {    
  this.form.setValue(invoice)   
}

component.html

<div class="col-md-8">
    <div formGroupName="customer">
      <h3>Customer</h3>
      <label>Name: <input class="form-control" type="text" formControlName="name"> </label>
      <label>Last Name:<input class="form-control" type="text" formControlName="lastname"></label>
      <label>Phone:<input class="form-control" type="text" formControlName="phone"></label>
      <label>Address:<input class="form-control" type="text" formControlName="address"></label>
   </div>
   <div><li formArrayName="purchases"></li></div>
</div>

View in StackBlitz

控制台中的值

Answer 1

错误是调用 setValue() 引起的，因为它执行严格的检查。

您正在尝试将一个包含多个项目的数组分配给在索引 0 处只有一个初始 FormGroup 的 FormArray。

在索引 1 处赋值失败，因为它不存在。

解决方法：

1. 定义表单数组：

   purchases: new FormArray([
       new FormGroup({
           product: new FormGroup({
               categoryS: new FormControl(''),
               location: new FormControl(''),
               name: new FormControl(''),
               price: new FormControl('')
           }),
           quantity: new FormControl('')
       })
   ])
   

2. 使用patchValue

3. 清除表单数组：

   while (purchasesFormArray.length) {
      purchasesFormArray.removeAt(0);
   }
   

4. 循环填充表单数组

   invoice.purchases.forEach(purchase => {
       purchasesFormArray.push(this._fb.group(purchase));
   });  
   

固定代码在这里：View in StackBlitz。