含嵌套FormGroup的FormArray：如何访问嵌套表单组控件？

首先你得先修正表单初始化的错误——formBuilder.array()接收的是控件数组，不是键值对对象，你现在的写法会导致FormArray结构异常，无法正确绑定。

修正后的TS代码 #

表单初始化 #

this.form = this.formBuilder.group({
  // 保留你的其他控件
  properties: this.formBuilder.array([
    this.formBuilder.group({ 
      label: new UntypedFormControl(),
      value: new UntypedFormControl(),
    }),
    this.formBuilder.group({ 
      label: new UntypedFormControl(),
      value: new UntypedFormControl(),
    }),
    this.formBuilder.group({ 
      label: new UntypedFormControl(),
      value: new UntypedFormControl(),
    }),
  ])
});

Getter方法（无需修改） #

get properties() {
  return this.form.controls.properties as FormArray;
}

HTML模板绑定 #

在[formGroupName]="i"的容器内，直接通过formControlName指定控件名label和value即可，因为每个FormGroup的控件结构是统一的：

<div formArrayName="properties">
  <ng-container *ngFor="let propGroup of properties.controls; let i = index">
    <div [formGroupName]="i">
      <!-- 每组的label和value输入框 -->
      <mat-form-field>
        <input matInput formControlName="label" placeholder="标签">
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="value" placeholder="值">
      </mat-form-field>

      <!-- 如果需要区分三组（比如不同占位符），可通过index判断 -->
      <!-- 示例：针对第一组单独设置 -->
      <!-- <mat-form-field *ngIf="i === 0">
        <input matInput formControlName="label" placeholder="第一组标签">
      </mat-form-field> -->
    </div>
  </ng-container>
</div>

额外说明 #

如果业务需要给每个FormGroup设置标识（比如first/second/third），可以在FormGroup内新增name控件存储标识，不要把它作为FormArray的键——因为FormArray本质是有序集合，不支持键值对结构。

内容的提问来源于stack exchange，提问作者tony nguyen