(Angular 5) Error: control.registerOnChange is not a function

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>

有什么想法吗？

View in 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 Example

(Angular 5) Error: control.registerOnChange is not a function

(Angular 5) Error: control.registerOnChange is not a function

typescript

angular

formarray