Angular 5 从 JSON 结果构建表单数组

Question

我在使用 Angular 表单数组时遇到以下问题，我想知道是否有人可以帮助我，因为我对 Angular 很陌生？

抱歉，由于项目的复杂性（很多依赖项和复杂的代码），我无法提供插件，但我会尽我所能提供尽可能多的细节！

我有一个来自服务调用的 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>

我遇到的问题是页面上没有显示任何内容，这是我在控制台中看到的错误 window:

Error: Cannot find control with path: 'aliases -> name'

我还将附上一张屏幕截图，显示控制台中我的 FormGroup 的结构 window：

FormGroup structure

希望这些信息足够了，如果需要更多详细信息，我可以提供。任何人都知道我哪里出错了？谢谢！

编辑：我无法对 formControlName（例如 formControlName="name"）进行硬编码，因为我正在遍历 "aliases" 中的控件列表，这就是我尝试使用 {{field.value.name}}

Answer 1

  <div *ngFor="let field of myFormGroup.controls.aliases.controls; 
    let i=index">
<div [formGroup]="field">
        <mat-form-field>
            <input matInput placeholder="{{field.value.name}}"
            formControlName="name">
        </mat-form-field>
        </div>

在您的 html.

中替换上面的代码

问题是您没有在 formcontrolname 之前绑定 formgroup。 formcontrolname 应该在 formgroup 下工作。

如有任何问题，请告诉我。

Angular 5 从 JSON 结果构建表单数组

Angular 5 build form array from JSON result

arrays

json

angular

formarray

angular-formbuilder