UPDATE:正如我们发现的,您需要一个formArray
而不是单个formControl
。因此,在构建表单时声明:
this.queryForm = this.fb.group({
arrayOfData: this.fb.array([]) // name a proper name to array
})
您可以使用setValue
or patchValue
当您收到数据时,您可以迭代响应并将值修补到表单数组中。称呼patchValues
-回调中的方法(订阅)。
patchValues() {
const control = <FormArray>this.queryForm.get('arrayOfData');
this.items.forEach(x => {
control.push(this.patchValue(x.first_name, x.pcode))
})
}
patchValue(name, code) {
return this.fb.group({
name: [name],
pcode: [code]
})
}
在模板中迭代 formarray 并记住设置 formgroupname (即索引):
<div formArrayName="arrayOfData">
<div *ngFor="let code of queryForm.get('arrayOFData').controls; let i = index">
<div [formGroupName]="i">
<label>Name: </label>
<input formControlName="name" /><br>
<label>Product Code: </label>
<input formControlName="pcode" /><br>
</div>
</div>
</div>
原答案:
您应该始终在组件中设置表单值,而不是在模板中。您可以使用patchValue
or setValue
,当您从服务收到值时...因此您可以在回调(订阅)内执行此操作:
this.myService.getSomeData()
.subscribe(data => {
this.item = data;
this.queryForm.patchValue({pcode: this.item.productCode})
});
那么你不需要使用[value]="item.productCode"
在您的表单中,该值是通过表单控件设置的。