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

Question

我正在尝试编辑表单，当我想显示要编辑的值时，使用 setValue 出现错误“错误错误：找不到名称为采购的表单控件。 ”

组件.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)   
}

组件.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>

在 StackBlitz 中查看

控制台中的值

Answer 1

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

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

在索引 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. 使用补丁值

3. 清除表单数组：

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

4. 在循环中填充表单数组

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

固定代码在这里：在 StackBlitz 中查看。