(角度 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>

有什么想法吗？

在堆栈闪电战中查看

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
}));
});

还检查分叉堆栈闪电战示例