Angular12动态FormArray提示Object is possibly 'null'报错如何解决

报错原因 #

TypeScript对AbstractControl.get()方法的返回值类型定义为 AbstractControl | null，无法确保运行时获取contacts控件一定非空，因此触发类型校验警告。

解决方案 #

方案1：组件内新增FormArray专属getter（最稳妥，推荐） #

在组件类中新增一个getter直接返回类型明确的FormArray，避免在模板中做类型判断：

// 组件类中添加以下代码
get contactsFormArray(): FormArray {
  return this.contactInfoForm.get('contacts') as FormArray;
}

模板中修改*ngFor遍历逻辑，同时修正原代码写死formGroupName="0"的错误（否则多组表单会全部绑定到第一个分组）：

<div formArrayName="contacts" class="col-md-12" 
     *ngFor="let contact of contactsFormArray.controls; let i = index">
  <!-- 动态绑定分组索引，不要写死0 -->
  <div [formGroupName]="i" class="row">
    <!-- 其余内容不变 -->
  </div>
</div>

方案2：模板中使用非空断言（简单快速） #

如果你可以确保contacts控件一定存在，直接在模板中用!非空断言操作符告诉TS该值不会为null即可：

*ngFor="let contact of contactInfoForm.get('contacts')!.controls; let i = index"

方案3：可选链+空值兜底（兼容极端空值场景） #

如果存在表单初始化前模板加载的场景，可以用可选链加空数组兜底避免报错：

*ngFor="let contact of (contactInfoForm.get('contacts')?.controls ?? []); let i = index"

额外隐藏问题修正 #

你当前模板还有两个问题需要调整避免后续功能异常：

• 子分组的校验提示不能用全局的fc.phone_number访问，要改为当前分组的控件：contact.get('phone_number')
• 勾选框is_primary_contact_number没有绑定formControlName，会导致数据无法同步到表单，需要补充绑定。

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