Angular FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件

this.formBuilder.array()方法只接受一个数组参数.你不能为它提供对象.

Approach 1: With 100

1. 将properties struct 修改为array.
2. 你可以使用一个循环来添加你需要的数字FormGroup到properties FormArray.你应该考虑实现一个函数来生成单个属性FormGroup.这旨在减少代码冗余.

ngOnInit() {
  // Form with Form Array
  this.form = this.formBuilder.group({
    //---a couple controls---
    properties: this.formBuilder.array([]),
  });

  for (let i = 0; i < 3; i++)
    this.properties.push(this.createPropertyFormGroup());
}

createPropertyFormGroup() {
  return this.formBuilder.group({
    label: new UntypedFormControl(),
    value: new UntypedFormControl(),
  });
}

<form [formGroup]="form">
  <div formArrayName="properties">
    <ng-container
      *ngFor="let propertiesForm of properties.controls; let i = index"
    >
      <div [formGroupName]="i">
        <label>Label: </label>
        <input formControlName="label" />
        <br />

        <label>Value: </label>
        <input formControlName="value" />
      </div>
      <hr />
    </ng-container>
  </div>
</form>

Approach 2: With 100

1. 在HTML中，你需要KeyValuePipe来重新定义属性FormGroup对象并生成每个FormGroup.

this.form = this.formBuilder.group({
  //---a couple controls---
  properties: this.formBuilder.group({
    first: this.createPropertyFormGroup(),
    second: this.createPropertyFormGroup(),
    third: this.createPropertyFormGroup(),
  }),
});

get propertiesFormGroup() {
  return this.form.controls['properties'] as FormGroup;
}

<form [formGroup]="form">
  <div formGroupName="properties">
    <ng-container
      *ngFor="let propertiesForm of propertiesFormGroup.controls | keyvalue;"
    >
      <div [formGroupName]="propertiesForm.key">
        <label>Label: </label>
        <input formControlName="label" />
        <br />

        <label>Value: </label>
        <input formControlName="value" />
      </div>
      <hr />
    </ng-container>
  </div>
</form>

Demo @ StackBlitz