Angular 15响应式表单：数组内嵌套动态FormArray报错求助

问题原因 #

Angular启用严格类型检查后，从FormGroup中获取数组类型的表单控件时，TypeScript会默认将其推断为AbstractControl<any, any>类型，而AbstractControl并不包含controls属性，因此触发类型错误。

解决方法 #

方法1：添加类型安全的Getter（推荐） #

在组件类中定义一个Getter方法，明确将目标控件断言为FormArray类型：

get itemsFormArray(): FormArray {
  return this.myForm.get('items') as FormArray;
}

之后在模板中直接通过这个Getter遍历控件：

<div *ngFor="let item of itemsFormArray.controls; let i = index">
  <!-- 子表单控件内容 -->
</div>

方法2：模板内直接类型断言 #

如果不想额外定义Getter，也可以在模板中直接做类型断言：

<div *ngFor="let item of (myForm.get('items') as FormArray).controls; let i = index">
  <!-- 子表单控件内容 -->
</div>

初始化验证 #

确保表单初始化时正确创建FormArray结构：

myForm = this.fb.group({
  items: this.fb.array([
    this.fb.group({
      // 子表单控件定义，如name: ['', Validators.required]
    })
  ])
});

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