Angular中如何访问FormArray内表单控件值并修复类型报错

两个核心问题导致类型校验失败：

1. TS侧employmentControls getter存在拼写错误+类型定义不准：你写的返回类型AbstractControl<FromGroup>[]里FromGroup是笔误，正确写法是FormGroup；且即便修正拼写，AbstractControl类型本身不包含controls属性，TS无法识别数组内的元素是FormGroup实例。
2. 模板侧直接通过下标访问employmentControls[index]['controls']拿到的类型仍然是AbstractControl，没有明确类型断言，TS自然无法识别到内部的designation控件；另外你直接访问控件对象不取值，最终渲染结果也不会是你预期的表单输入值。

1. 修正TS层类型定义 #

修正拼写错误，给FormArray、FormGroup明确指定类型，可选增加工具方法简化模板调用：

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

// 可选：定义表单数据类型，获得全链路类型提示
interface EmploymentFormItem {
  designation: FormControl<string>;
  // 其余表单项按需补充
}

initEmploymentForm(): void {
  this.employmentForm = this._formBuilder.group({
    // 明确指定FormArray内的元素类型
    employments: this._formBuilder.array<FormGroup<EmploymentFormItem>>([])
  });
}

get employments(): FormArray<FormGroup<EmploymentFormItem>> {
  return this.employmentForm.get('employments') as FormArray<FormGroup<EmploymentFormItem>>;
}

// 修正返回类型，明确数组元素是FormGroup
get employmentControls(): FormGroup<EmploymentFormItem>[] {
  return this.employments.controls;
}

// 可选：新增工具方法，模板里调用无需重复写类型断言
getEmploymentItemGroup(index: number): FormGroup<EmploymentFormItem> {
  return this.employments.at(index) as FormGroup<EmploymentFormItem>;
}

如果你用的Angular版本低于14（不支持严格泛型表单类型），把所有泛型参数去掉即可，保留as FormArray/as FormGroup断言就行。

2. 修正模板层取值写法 #

不要直接通过controls属性访问子控件，优先用Angular官方推荐的get()方法取值，访问值时记得加.value：

<form [formGroup]="employmentForm">
   <ng-container formArrayName="employments">
      <ng-container
        *ngFor="let employment of employments.controls; let index = index"
      >
        <div [formGroupName]="index" style="margin-bottom: 100px">
             <div>
               <!-- 推荐写法：调用工具方法，类型安全代码简洁 -->
               {{ getEmploymentItemGroup(index).get('designation')?.value }}

               <!-- 不需要额外工具方法的写法：直接给循环出的控件做类型断言 -->
               <!-- {{ (employment as FormGroup).get('designation')?.value }} -->
             </div>
        </div>
      </ng-container>
   </ng-container>
</form>

• 尽量避免在模板中通过['controls']的下标方式访问子控件，get('控件名')是官方推荐的写法，对动态表单、嵌套表单的兼容性更好。
• 模板里访问表单值时加安全导航符?.，避免表单初始化阶段控件还未生成时出现空值报错。

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