TypeScript严格模式下Reactive Forms渲染内部对象数组报错求助

问题原因 #

在TypeScript严格模式下，Angular的FormGroup.get()或直接访问controls属性时，返回的类型是AbstractControl，TypeScript无法自动推断它是FormArray或FormGroup子类，因此不允许直接访问子类独有的controls属性，进而抛出类型错误。

解决方案 #

方案1：组件内封装Getter方法（推荐） #

在组件类中定义返回明确FormArray类型的getter，让模板使用时TypeScript能正确识别类型：

import { FormArray, FormGroup } from '@angular/forms';

// 组件类内添加
get programTypesArray(): FormArray {
  return (this.myForm.get('data.program_types') as FormArray);
}

// 更严谨的逐层断言写法
get programTypesArray(): FormArray {
  const dataGroup = this.myForm.get('data') as FormGroup;
  return dataGroup.get('program_types') as FormArray;
}

模板中直接调用该getter：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)" #form="ngForm">
    <div formGroupName="data">
        <div class="simple-checkbox-options" formArrayName="program_types">
            <ng-container
                *ngFor="let program_type of programTypesArray.controls; let i=index">
                <ng-container [formGroupName]="i">
                    <!-- 表单控件内容 -->
                </ng-container>
            </ng-container>
        </div>
    </div>
</form>

方案2：模板中使用$any()绕过类型检查（不推荐） #

若不想修改组件代码，可在模板中用Angular内置的$any()函数临时绕过TypeScript类型检查：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)" #form="ngForm">
    <div formGroupName="data">
        <div class="simple-checkbox-options" formArrayName="program_types">
            <ng-container
                *ngFor="let program_type of $any(myForm.get('data.program_types')).controls; let i=index">
                <ng-container [formGroupName]="i">
                    <!-- 表单控件内容 -->
                </ng-container>
            </ng-container>
        </div>
    </div>
</form>

此方法会丢失TypeScript的类型安全校验，仅适合临时调试场景。

方案3：自定义表单类型接口（进阶） #

为表单定义对应类型接口，结合类型断言让表单结构类型更清晰：

import { FormGroup, FormArray } from '@angular/forms';

interface MyFormType {
  data: FormGroup<{
    program_types: FormArray;
  }>;
}

// 组件中声明表单时指定类型
myForm!: FormGroup<MyFormType>;

模板中配合局部断言使用：

<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value)" #form="ngForm">
    <div formGroupName="data">
        <div class="simple-checkbox-options" formArrayName="program_types">
            <ng-container
                *ngFor="let program_type of (myForm.controls.data.controls.program_types as FormArray).controls; let i=index">
                <ng-container [formGroupName]="i">
                    <!-- 表单控件内容 -->
                </ng-container>
            </ng-container>
        </div>
    </div>
</form>

该方式适合复杂表单场景，能让表单结构的类型约束更明确。

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