angular - （Angular 5）错误：control.registerOnChange 不是函数

Question

我需要在表单中显示这些值以便稍后进行编辑。总是告诉我这个错误“错误错误：control.registerOnChange 不是函数”

我以这种方式构建我的表单

 form = this._fb.group({
  createdAt:'',
  customer: this._fb.group({
    name: '',
    lastname: '',
    phone: '',
    address: ''
  }),
  purchases: this._fb.array([ <-- this is the problematic,the others work well
    this._fb.group({
      product: this._fb.group({
        name:'',
        location:'',
        categoryS:'',
        price:''
      }),
      quantity: ''
    })
  ])      
});

并尝试展示它

   <div formArrayName="purchases">
        <label>Products:</label> 
     <div *ngFor="let product of form.controls.purchases.controls; let i = index">
         <input [formControlName]="i" class="form-control"/>            
      </div>
     </div>

有任何想法吗？

在 StackBlitz 中查看

Answer 1

我可以分享我的想法。

更改模板如下：

<div *ngFor="let product of form.controls.purchases.controls; let i = index" [formGroupName]="i">
  <div formGroupName="product">
    <input formControlName="name" class="form-control"/>  
    <input formControlName="location" class="form-control"/>     
    ...
  </div>
</div>

并确保您在编辑操作时正确填写购买数组：

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

检查还分叉了 Stackblitz 示例