Angular响应式表单中访问嵌套FormArray的策略与实践

import { FormArray, FormGroup, FormControl } from '@angular/forms';

// ... 组件其他代码

registrationForm = new FormGroup({
  registrations: new FormArray([ // 主FormArray，包含多个注册项
    this.createRegistrationGroup()
  ])
});

createRegistrationGroup(): FormGroup {
  return new FormGroup({
    someOtherControl: new FormControl(''), // 注册项的其他FormControl
    setDate: new FormArray([ // 嵌套FormArray，属于每个注册项
      this.createSetDateGroup()
    ]),
  });
}

createSetDateGroup(): FormGroup {
  return new FormGroup({
    project: new FormControl(''),
    date: new FormControl('')
  });
}

get setDate(): FormArray {
  // 错误尝试：registrations是一个FormArray，不能直接.get('setDate')
  // 'setDate' 是 FormArray 中每个 FormGroup 的属性，而不是 FormArray 本身的属性
  return this.registrations.get('setDate') as FormArray;
}

import { FormArray, FormGroup, FormControl, Validators } from '@angular/forms';

// ... 组件其他代码

// 获取 'registrations' FormArray 的便捷方法
get registrations(): FormArray {
  return this.registrationForm.get('registrations') as FormArray;
}

/**
 * 根据注册项的索引获取其内部的 'setDate' FormArray
 * @param registrationIndex 父级 'registrations' FormArray中的索引
 * @returns 对应的 'setDate' FormArray
 */
getSetDateControlFromRegistrationForm(registrationIndex: number): FormArray {
  // 1. 从 'registrations' FormArray中获取指定索引的控件
  //    这个控件是一个 FormGroup
  const registrationGroup = this.registrations.controls[registrationIndex] as FormGroup;

  // 2. 从获取到的 FormGroup 中，通过键名 'setDate' 获取嵌套的 FormArray
  return registrationGroup.get('setDate') as FormArray;
}

<form [formGroup]="registrationForm">
  <table formArrayName="registrations">
    <thead>
      <tr>
        <th>其他控件</th>
        <th>日期设置</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历主 FormArray 'registrations' -->
      <tr *ngFor="let reg of registrations.controls; let i = index" [formGroupName]="i">
        <td>
          <!-- 这里放置 'registrations' 内部 FormGroup 的其他 FormControl -->
          <input formControlName="someOtherControl" placeholder="其他控件值">
        </td>
        <td>
          <!-- 核心部分：遍历嵌套 FormArray 'setDate' -->
          <!-- 需要一个 ng-container 包裹 formArrayName="setDate" -->
          <ng-container formArrayName="setDate">
            <ng-container *ngFor="let dateControl of getSetDateControlFromRegistrationForm(i).controls; let ind = index">
              <!-- 每个 'dateControl' 都是 'setDate' FormArray 中的一个 FormGroup -->
              <div [formGroupName]="ind" style="margin-bottom: 5px;">
                <input formControlName="project" placeholder="项目名称">
                <input formControlName="date" type="date" placeholder="选择日期">
                <button type="button" (click)="removeSetDateRow(i, ind)">删除日期</button>
              </div>
            </ng-container>
            <button type="button" (click)="addSetDateRow(i)">添加日期</button>
          </ng-container>
        </td>
        <td>
          <button type="button" (click)="removeRegistrationRow(i)">删除注册项</button>
        </td>
      </tr>
    </tbody>
  </table>
  <button type="button" (click)="addRegistrationRow()">添加注册项</button>
  <button type="submit" (click)="onSubmit()">提交表单</button>
</form>