Angular 4嵌套FormArrays报错：Cannot read property 'push' of null

看起来你遇到的核心问题是**personRows3这个FormArray没有被正确初始化**，导致调用push时触发了Cannot read property 'push' of null错误。我来帮你一步步排查和修复：

1. 先确认Form结构的初始化是否正确 #

首先要保证你的segmentRows3数组里的每个segment对象，在创建时就已经包含了personRows3这个FormArray。比如你创建segment的方法应该是这样的：

// 假设你用FormBuilder来创建表单
constructor(private fb: FormBuilder) {}

// 创建单个segment的FormGroup
private createSegment(): FormGroup {
  return this.fb.group({
    id: [''],
    time: [''],
    // 关键：这里必须初始化personRows3为一个空的FormArray
    personRows3: this.fb.array([])
  });
}

// 初始化segmentRows3数组的方法（比如页面加载时调用）
initSegmentRows3() {
  const segmentArray = this.fb.array([]);
  // 添加初始的segment（如果需要）
  segmentArray.push(this.createSegment());
  this.mySummaryForm.setControl('segmentRows3', segmentArray);
}

如果你的createSegment方法里没有初始化personRows3，那当你通过get方法获取它时，就会返回null，自然无法调用push。

2. 修正addPerson方法的逻辑 #

你的原代码里直接通过字符串路径获取personRows3，容易因为路径错误或者未初始化导致问题。建议拆分步骤，同时增加安全检查：

addPerson(index: number) {
  // 1. 获取segmentRows3这个FormArray
  const segmentRows3 = this.mySummaryForm.get('segmentRows3') as FormArray;
  if (!segmentRows3) {
    console.error('segmentRows3 FormArray未找到');
    return;
  }

  // 2. 获取指定索引的segment FormGroup
  const segmentGroup = segmentRows3.at(index) as FormGroup;
  if (!segmentGroup) {
    console.error(`索引${index}对应的segment不存在`);
    return;
  }

  // 3. 获取personRows3 FormArray
  const personRows3 = segmentGroup.get('personRows3') as FormArray;
  if (!personRows3) {
    console.error(`索引${index}的segment中未初始化personRows3`);
    return;
  }

  // 4. 创建新的person FormGroup（根据你的动态字段调整）
  const newPerson = this.fb.group({
    role: [''],
    infos: [''] // 如果infos是多个字段，可以改成this.fb.group({...})
  });

  // 5. 执行push操作
  personRows3.push(newPerson);
}

3. 检查模板绑定是否正确 #

还要确保模板里的personRows3是用formArrayName正确绑定的，比如：

<!-- 假设segmentRows3的循环是这样的 -->
<div formArrayName="segmentRows3">
  <div *ngFor="let segment of segmentRows3.controls; let i = index" [formGroupName]="i">
    <!-- segment的id和time字段 -->
    <input formControlName="id" placeholder="ID">
    <input formControlName="time" placeholder="Time">

    <!-- personRows3的循环 -->
    <div formArrayName="personRows3">
      <div *ngFor="let person of personRows3.controls; let j = index" [formGroupName]="j">
        <input formControlName="role" placeholder="Role">
        <input formControlName="infos" placeholder="Infos">
      </div>
      <!-- 添加person的按钮 -->
      <button (click)="addPerson(i)">添加Person</button>
    </div>
  </div>
</div>

这样一步步排查下来，应该就能解决push时报错的问题了。核心就是确保每个segment都提前初始化了personRows3这个FormArray，并且在代码里做必要的安全检查，避免null引用。

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