Angular 14使用FormArray遇TS7053等错误，求指出问题

错误根源 #

1. 类型不匹配：myDetailsForm.get('skills')返回的类型是AbstractControl | null，而controls属性仅属于FormArray类型，TypeScript无法确定返回的控件是FormArray，因此抛出TS7053错误。
2. 空值风险：get()方法可能返回null，TypeScript严格模式下会触发Object is possibly 'null'的警告（ngtsc(2531)）。

最优解决方案：组件内定义Getter方法 #

在组件类中添加一个返回FormArray类型的getter，明确告知TypeScript控件类型，同时规避空值风险：

// 组件类代码
import { FormArray, FormGroup, FormControl } from '@angular/forms';

// ...其他代码
get skillsFormArray(): FormArray {
  // 断言为FormArray，因为我们明确知道skills是FormArray类型
  return this.myDetailsForm.get('skills') as FormArray;
}

this.myDetailsForm = new FormGroup({
    // ...其他独立控件
    skills: new FormArray([new FormControl('')]),
});

然后修改模板，使用这个getter遍历控件：

<div formArrayName="skills">
    <div *ngFor="let skill of skillsFormArray.controls; let i=index">
        <input type="text" [formControlName]="i">
    </div>
</div>

临时替代方案：模板内类型断言（不推荐） #

如果不想修改组件代码，也可以在模板中直接做类型断言和非空断言，但这种写法会让模板逻辑冗余，不利于维护：

<div formArrayName="skills">
    <div *ngFor="let skill of (myDetailsForm.get('skills') as FormArray).controls; let i=index">
        <input type="text" [formControlName]="i">
    </div>
</div>

或者使用非空断言!（需确保skills控件一定存在）：

<div formArrayName="skills">
    <div *ngFor="let skill of myDetailsForm.get('skills')!.controls; let i=index">
        <input type="text" [formControlName]="i">
    </div>
</div>

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