Angular 4嵌套FormArray报错：无法找到控件路径'segmentRows3 -> 1 -> segmentId3'

看起来你遇到的是Angular表单控件路径不匹配的问题，错误Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'的根源在于你在addSegment()方法里的FormArray结构写错了。

问题分析 #

你的segmentRows3应该是一个存放单个segment FormGroup的FormArray，但你现在却把另一个FormArray推了进去。Angular在渲染模板时，期望segmentRows3的每一项都是包含segmentId、time等字段的FormGroup，结果你塞了一个FormArray进去，自然找不到对应的控件路径了。

修正方案 #

首先，我们把创建表单控件的逻辑拆分成可复用的方法，这样结构更清晰，也不容易出错：

// 创建单个人员信息的FormGroup（对应你说的包含role、infos的人员信息）
private createPersonInfo(): FormGroup {
  return this.fb.group({
    role: [''],
    infos: ['']
  });
}

// 创建单个segment的FormGroup，包含segment基础字段和关联人员的FormArray
private createSegment(): FormGroup {
  return this.fb.group({
    segmentId: [''], // 注意字段名要和模板里的formControlName完全一致，别用segmentId3这种带数字的命名
    time: [''],
    personInfos: this.fb.array([this.createPersonInfo()]) // 关联人员列表，初始可放一个默认的人员信息
  });
}

然后修正你的addSegment()方法，确保推到segmentRows3里的是正确的FormGroup：

addSegment() {
  const segmentRows3 = this.mySummaryForm.get('segmentRows3') as FormArray;
  // 这里push的是createSegment()返回的FormGroup，而非FormArray
  segmentRows3.push(this.createSegment());
}

额外注意事项 #

• 模板里的formControlName必须和FormGroup里定义的字段名完全一致，比如你错误里的segmentId3，大概率是命名不统一导致的，建议把字段名改成统一的（比如segmentId），避免带数字后缀混淆。
• 模板结构要和FormArray/FormGroup的嵌套层级匹配，示例模板结构参考：

<div [formGroup]="mySummaryForm">
  <div formArrayName="segmentRows3">
    <!-- 遍历每个segment -->
    <div *ngFor="let segment of segmentRows3.controls; let segIndex=index" [formGroupName]="segIndex">
      <input formControlName="segmentId" placeholder="Segment ID">
      <input formControlName="time" placeholder="Time">

      <!-- 遍历当前segment的关联人员 -->
      <div formArrayName="personInfos">
        <div *ngFor="let person of segment.get('personInfos').controls; let personIndex=index" [formGroupName]="personIndex">
          <input formControlName="role" placeholder="Role">
          <input formControlName="infos" placeholder="Infos">
        </div>
      </div>
    </div>
  </div>
  <button (click)="addSegment()">添加Segment</button>
</div>

这样调整后，Angular就能正确找到控件路径，你也能顺利添加segment了。

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