Angular嵌套ngFor中formControlName报错：无法找到控件路径

问题核心原因 #

你碰到的Cannot find control with path错误，本质是嵌套的notePartials数组没有被正确注册为Angular表单的FormArray控件。虽然表单的value里能看到数据，但模板访问表单控件时，Angular找不到对应的表单控件实例，只能读取静态数据，无法实现表单控件绑定。

具体修复步骤 #

1. 组件类中正确构建嵌套FormArray #

在创建外层array这个FormArray时，每个子项的notePartials必须是FormArray类型，且每个notePartial对象要转为FormGroup：

// 组件类中构建表单的核心方法
createItem(): FormGroup {
  return this.fb.group({
    id: [],
    // 将notePartials初始化为FormArray
    notePartials: this.fb.array(this.buildNotePartials())
  });
}

// 将原始notePartials数据转为FormGroup数组
buildNotePartials(): FormGroup[] {
  return yourInitialData.notePartials.map(partial => this.fb.group({
    id: [partial.id],
    // 其他需要绑定的字段
  }));
}

2. 模板中正确关联嵌套表单控件 #

遍历嵌套的notePartials时，要通过formArrayName指令绑定，并且借助组件类的方法获取对应的FormArray实例：

<!-- 外层array的遍历 -->
<div formArrayName="array" *ngFor="let item of array.controls; let i = index">
  <div [formGroupName]="i">
    <!-- 外层字段的绑定 -->
    <input formControlName="id" type="text">

    <!-- 嵌套notePartials的遍历 -->
    <div formArrayName="notePartials" *ngFor="let partial of getNotePartials(i).controls; let j = index">
      <div [formGroupName]="j">
        <!-- 这里就能正常绑定嵌套控件了 -->
        <input formControlName="id" type="text">
      </div>
    </div>
  </div>
</div>

同时在组件类中添加获取嵌套FormArray的辅助方法：

getNotePartials(index: number): FormArray {
  return this.array.at(index).get('notePartials') as FormArray;
}

3. 验证表单结构一致性 #

确保你的FormGroup/FormArray结构和数据结构完全匹配：每个层级的字段名拼写、大小写一致，所有数组类型的字段都用FormArray而非普通数组。

关键注意事项 #

• 模板中formArrayName和formGroupName的名称，必须和组件类中注册的表单控件名称完全一致。
• 遍历表单数组时，必须基于表单控件的controls数组，而不是原始数据数组，这样Angular才能关联到正确的表单控件实例。

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