Angular动态FormGroup/FormArray报Cannot read properties of null错误求助

• 路径错误：additionalId 是嵌套在 vehicle 子FormGroup下的字段，你直接用 addVehicle.get('additionalId') 无法获取到目标对象，返回结果为null，两个报错本质都是this.additionalId实际为null导致的。
• 推入控件类型不匹配：additionalId 声明为FormArray<FormGroup>，每个子项是包含label和number两个控件的FormGroup，你提交方法里推入的是单个FormControl，类型不符后续渲染会出现异常。
• 模板绑定错误：模板里[formControlName]="i"是错误写法，应该绑定对应FormGroup内的实际字段名label或number。

1. TS代码修正 #

// 提前声明additionalId变量
additionalId!: FormArray;

ngOnInit(): void {
  // 修正嵌套字段的获取路径，先定位到vehicle子表单再取additionalId
  this.additionalId = this.addVehicle.get('vehicle.additionalId') as FormArray
}

submit() {
  console.log(this.addVehicle.value)
  // 推入和原有结构完全一致的FormGroup
  const newIdGroup = new FormGroup({
    label: new FormControl('', Validators.required),
    number: new FormControl('', Validators.required)
  })
  this.additionalId.push(newIdGroup);
}

2. HTML模板修正 #

<ng-container formArrayName="additionalId">
  <div class="form-group mb-2" *ngFor="let _ of additionalId.controls; index as i">
    <label>Additional ID {{i+1}}</label>
    <ng-container [formGroupName]="i">
      <input type="text" class="form-control mb-1" placeholder="标签" formControlName="label">
      <input type="text" class="form-control" placeholder="编号" formControlName="number">
    </ng-container>
  </div>
</ng-container>

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