Angular响应式表单FormArray内嵌套FormGroup的使用方法

问题根因 #

你的hole1控件定义在holes这个内层FormGroup下，不是person层级FormGroup的直接子控件。直接在person的FormGroup上下文内写formControlName="hole1"时，Angular会在当前FormGroup下直接查找hole1控件，找不到对应实例就会出现绑定失效、无法输入的问题。

修复步骤 #

TS层的表单结构定义完全正确，不需要修改，只需要调整HTML模板的绑定层级，补全内层FormGroup的上下文声明即可：

• 在需要放置hole1输入框的位置，新增一个容器元素，添加formGroupName="holes"属性，声明当前容器的上下文属于holes表单组
• 在该容器内部放置hole1的输入框，正常绑定formControlName="hole1"即可

修正后完整HTML代码 #

<form [formGroup]="roundForm" (ngSubmit)="onSubmit()">
  Persons:
  <div formArrayName="persons">
    <div *ngFor="let person of persons.controls; let i=index">
      <div [formGroupName]="i">
        {{i}} <br>
        <input type="text" formControlName="name"> <br>
        <input type="text" formControlName="hc"> <br>
        <!-- 绑定内层holes表单组 -->
        <div formGroupName="holes">
          Hole1: <input type="text" formControlName="hole1">
        </div>

        <button (click)="removePerson(i)">Remove</button>
      </div>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

<button type="button" (click)="addPerson()">Add</button>

<pre>{{roundForm.value | json}}</pre>

额外说明 #

• 后续如果需要新增hole2、hole3等同属于holes组的控件，直接放在formGroupName="holes"的容器内，绑定对应formControlName即可
• 模板中取值时不需要额外加this，直接写属性名即可，原代码里的{{this.roundForm.value | json}}去掉this更符合Angular模板规范。

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