Angular 2嵌套FormArray双层ngFor中如何访问formControlName？

嘿，作为跟Angular动态表单打交道好几年的老玩家，我来帮你排查这个formControlName访问失效的问题！结合你给出的代码片段，大概率是表单嵌套结构的绑定逻辑出了问题，咱们一步步来捋：

首先，排查最容易忽略的基础问题 #

你有没有给整个表单最外层绑定formGroup？这是很多新手容易漏掉的关键一步！如果没有这层绑定，内部的formArrayName和formGroupName都会直接失效。正确的结构应该是这样：

<form [formGroup]="timetableForm"> <!-- 必须有这行！ -->
  <table>
    <tbody formArrayName="timetable">
      <!-- 你的tr/td代码 -->
    </tbody>
  </table>
</form>

然后，检查表单的嵌套结构是否匹配 #

从你的代码看，timetable是一个FormArray，每个元素是包含periods（又是一个FormArray）的FormGroup。先确认组件里的表单构建逻辑是否正确，比如应该像这样：

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

// 组件类里的代码
constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 初始化表单：2个课时项，每个项包含3个时段控件
  this.timetableForm = this.fb.group({
    timetable: this.fb.array([
      this.createTimetableItem(3),
      this.createTimetableItem(3)
    ])
  });
}

// 创建单个课时项（包含时段数组）
private createTimetableItem(periodCount: number): FormGroup {
  const periodsArr = this.fb.array([]);
  for (let i = 0; i < periodCount; i++) {
    periodsArr.push(this.fb.control(`初始值${i+1}`)); // 给每个时段初始化值
  }
  return this.fb.group({
    periods: periodsArr
  });
}

模板遍历FormArray的正确姿势 #

你当前用child.controls.periods.controls遍历虽然能拿到控件，但推荐用getter方法来封装，既避免模板里的冗余代码，也能避免Angular的类型提示报错。比如在组件里加两个getter：

// 获取外层的timetable数组
get timetableArray(): FormArray {
  return this.timetableForm.get('timetable') as FormArray;
}

// 获取指定课时项的periods数组
getPeriodsArray(timetableIndex: number): FormArray {
  return this.timetableArray.at(timetableIndex).get('periods') as FormArray;
}

然后修改模板的遍历逻辑，这里要注意一个核心点：

• 如果periods数组里的元素是FormControl（单个输入框），不需要用formControlName，直接用[formControl]绑定即可；
• 如果是FormGroup（每个时段有多个字段），才需要用[formGroupName]配合formControlName。

对应你的场景，模板应该改成这样：

<form [formGroup]="timetableForm">
  <table border="1">
    <tbody formArrayName="timetable">
      <tr *ngFor="let item of timetableArray.controls; let i = index;" [formGroupName]="i">
        <td *ngFor="let period of getPeriodsArray(i).controls; let j = index;">
          <!-- 直接绑定FormControl，这是你可能出错的地方！ -->
          <input [formControl]="period" placeholder="输入时段内容" />
          
          <!-- 如果period是FormGroup（比如每个时段有名称+时长），则改成下面的写法： -->
          <!-- <div [formGroupName]="j">
            <input formControlName="periodName" />
            <input formControlName="duration" />
          </div> -->
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 调试用：实时查看表单值，确认绑定是否生效 -->
  <pre>{{ timetableForm.value | json }}</pre>
</form>

最后，快速排查清单 #

1. 确认最外层表单绑定了[formGroup]="timetableForm"；
2. 检查组件中FormArray的嵌套结构是否和模板匹配；
3. 遍历FormArray内的FormControl时，用[formControl]而非formControlName；
4. 用getter方法封装表单数组的获取，避免直接访问controls属性。

按照上面的步骤调整后，应该就能正常访问表单控件了！

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