Angular开发遇TS2739报错：FormArray绑定FormControl类型不匹配

问题根源 #

FormArray类的controls属性默认类型为AbstractControl[]，而Angular响应式表单的[formControl]指令入参要求必须传入FormControl类型实例。原代码中模板直接通过devices.controls[i]索引取值，得到的是抽象的AbstractControl类型，不满足入参类型要求，因此触发TS2739编译阻断，导致本地服务无法启动。

修复步骤 #

• 修正模板内的冗余取值逻辑：原代码的*ngFor循环已经把当前遍历的控制项赋值给了control变量，完全不需要重新通过devices.controls[i]重复索引取值。
• 从根源解决类型匹配问题：给FormArray增加泛型标注，明确数组内的元素类型为FormControl，替代原来无泛型时的默认类型推导。原代码中devices = new FormArray([])修改为devices = new FormArray<FormControl>([])即可。修改后TS会自动识别所有从该FormArray上取出的控制项类型为FormControl，完全匹配[formControl]指令的入参要求，不需要额外类型断言。
• 临时替代写法（不推荐长期使用）：如果暂时不想修改组件内的FormArray声明，可以在模板绑定处显式做类型断言，写法为[formControl]="devices.controls[i] as FormControl"。这种写法虽然能过编译校验，但会增加模板的类型耦合度，可读性弱于泛型标注方案。

修复后参考代码 #

TypeScript 组件代码 #

terminalNameInput = new FormControl();
// 增加FormControl泛型标注，明确数组元素类型
devices = new FormArray<FormControl>([]);

addTerminalGroup = new FormGroup({
    terminalNameInput: this.terminalNameInput,
    devices: this.devices,
});

addDevice() {
    this.devices.push(new FormControl(''));
}

HTML 模板代码 #

<div formArrayName="devices">
    <h3>Devices</h3>
    <button (click)="addDevice()">Add Device</button>

    <div *ngFor="let control of devices.controls; index as i">
        <label>
            Device:
            <!-- 直接使用循环遍历出的control变量做绑定，不再重复索引取值 -->
            <input type="text" [formControl]="control">
        </label>
    </div>
</div>

注意：如果后续FormArray内存放的是FormGroup类型的控制项，同样需要给FormArray加对应泛型（如new FormArray<FormGroup>([])），搭配对应层级的formGroupName指令使用，避免重复触发同类类型校验错误。

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