我在使用 Angular 表单数组时遇到以下问题,我想知道是否有人可以帮助我,因为我对 Angular 还是很陌生?
抱歉,由于项目的复杂性(大量的依赖项和复杂的代码),我无法提供 plunker,但我会尽我所能提供尽可能多的细节!
我有一个来自服务调用的 JSON 响应,其中包含一组字段(称为“myFields”),例如:
0:
name: "field1"
1:
name: "field2"
我从对 API 的调用中得到了这个响应,我需要使用响应中的字段来构建一个表单。我目前正在遍历此响应并尝试构建一个表单数组,如下所示:
constructor(private formBuilder: FormBuilder){
this.myFormGroup = this.formBuilder.group({
aliases: this.formBuilder.array([
])
});
}
get aliases() {
return this.myFormGroup.get('aliases') as FormArray;
}
getServiceFields(){
*call to get fields and store in "myFields"*
for (let item of myFields) {
this.aliases.push(this.createGroup(item));
}
}
createGroup(item): FormGroup {
return this.formBuilder.group({
name: new FormControl(item.name)
});
}
在我看来,我有:
<div [formGroup]="myFormGroup" class="example-form">
<div formArrayName="aliases" >
<div *ngFor="let field of myFormGroup.controls.aliases.controls;
let i=index">
<mat-form-field>
<input matInput placeholder="{{field.value.name}}"
formControlName="{{field.value.name"}}>
</mat-form-field>
我遇到的问题是页面上没有显示任何内容,这是我在控制台窗口中看到的错误:
我还将附上一个屏幕截图,在控制台窗口中显示我的 FormGroup 的结构:
希望这是足够的信息,如果需要其他详细信息,我可以提供。有人知道我哪里出错了吗?谢谢!
编辑:我不能硬编码formControlName(例如formControlName =“name”),因为我正在遍历“别名”中的控件列表,这就是我尝试使用{{field.value.name}}的原因