我正在使用Angular2 – Reactive Forms.一切正常,直到我想在Form中的一个字段中显示预先填充的值.
场景：页面上有多个按钮,每个按钮打开一个带有字段的表单
>姓名
>电子邮件
>消息
>产品代码 – >此值应根据服务项目代码预先填充.
Failing Scenario: Product Code input value turns to null.
TS代码：
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
queryForm: FormGroup;
constructor(private _productService: ProductService,fb: FormBuilder) {
this.queryForm = fb.group({
'name': [null,Validators.compose([Validators.required,Validators.minLength(5)])],'email': [
null,[Validators.required,Validators.email]
],'message': [null,'pcode': [
null
],})
}
HTML表格：
<div *ngFor="let item of product">
<form action="#" [formGroup]="queryForm"
(ngSubmit)="submitForm(queryForm.value)" method="post"
novalidate="" class="text-left note" id="f_{{item.productId}}">
[ .... rest of the fields ...]
<div class="form-group hidden">
<input type="hidden " class="form-control " id="pcode " name="pcode"
formControlName="pcode" [value]="item.productCode" />
</div>
<div class="form-group">
<button type="submit" class="btn1" [disabled]="!queryForm.valid">Submit</button>
</div>
</form>
</div>
我怎样才能实现这一目标？
解决方法
更新：正如我们发现的那样,您需要一个formArray而不是一个formControl.因此,在构建表单时声明：
this.queryForm = this.fb.group({
arrayOfData: this.fb.array([]) // name a proper name to array
})
收到数据后,可以使用setValue或patchValue,迭代响应并将值修补到表单数组.在回调中调用patchValues方法(subscribe).
patchValues() {
const control = <FormArray>this.queryForm.controls.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.controls.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或setValue …因此您可以在回调(订阅)内执行此操作：
this.myService.getSomeData()
.subscribe(data => {
this.item = data;
this.queryForm.patchValue({pcode: this.item.productCode})
});
然后您不需要在表单中使用[value] =“item.productCode”,而是使用表单控件设置此值.
