Angular迭代FormArray报Object possibly 'null'错误问题咨询

实现思路正确性确认 #

你的表单结构设计思路完全符合Angular响应式表单规范：根FormGroup下同时挂载普通FormControl（对应代码中的one字段）和FormArray（对应title字段），FormArray内部挂载多个FormControl实例的结构没有问题。嵌套FormGroup中使用FormArray的思路本身也不存在错误，迭代失败是TypeScript类型检查触发的语法问题，和结构设计无关。

报错原因 #

Object possibly 'null' - controls是TypeScript严格空值检查的告警：AbstractControl.get()方法的返回值类型为AbstractControl | null，TS无法保证abcForm.get('title')一定返回非空实例，因此直接访问.controls属性会抛出空值风险提示。

修复方案 #

方案1：非空断言（快速修复，适合确定字段一定存在的场景） #

在模板的get调用后添加!非空断言操作符，明确告知TS该值一定非空：

<form [formGroup]="abcForm">
    <section>
<div formArrayName="title">
<ul>
  <li *ngFor="let control of abcForm.get('title')!.controls; let i= index;">
       {{i}}
  </li>
</ul>
</div>
</form>

方案2：封装TS getter（最推荐，类型安全+可复用性高） #

在TS文件中新增专门的getter返回title对应的FormArray实例，避免模板中重复编写获取逻辑：

// 新增getter
get titleArray(): FormArray {
  return this.abcForm.get('title') as FormArray;
}

模板中直接调用getter即可：

<li *ngFor="let control of titleArray.controls; let i= index;">

方案3：可选链+空值兜底（适合字段可能不存在的场景） #

使用可选链加空值合并操作符，当title为空时兜底返回空数组避免报错：

<li *ngFor="let control of abcForm.get('title')?.controls ?? []; let i= index;">

如果是嵌套FormGroup下的FormArray场景，只需要将get方法的参数改为嵌套路径即可，比如根FormGroup下的子FormGroupsubForm中挂载title FormArray，路径写为abcForm.get('subForm.title')即可，其他迭代逻辑完全一致。

补充代码修正 #

你提供的TS代码中构造函数存在语法疏漏，赋值逻辑需要放到构造函数大括号内：

constructor(private fb: FormBuilder) {
  this.abcForm = this.fb.group({
    one: ['',Validators.required],
    title: this.buildTitleControls()
  });
}

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