Angular类型化表单：FormArray控件属性模板访问报错解决

问题原因 #

在类型化表单中，FormArray默认被推断为FormArray<AbstractControl>，模板遍历controls时，每个元素的类型是AbstractControl——它没有code、controls['code']这类属性，因此TypeScript会抛出类型错误。

正确解决步骤 #

1. 明确表单类型定义 #

先为单个货币表单定义类型，让TypeScript识别完整的表单结构：

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

// 定义单个货币表单的类型
type CurrencyFormGroup = FormGroup<{
  code: FormControl<string>;
  label: FormControl<string>;
}>;

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class CurrencyManagerComponent {
  currencyForm = this.fb.group({
    // 为FormArray指定具体的类型
    currencies: this.fb.array<CurrencyFormGroup>([])
  });

  constructor(private fb: FormBuilder) {
    // 预填充示例数据
    this.currencies.push(this.fb.group({
      code: ['USD', Validators.required],
      label: ['美元', Validators.required]
    }));
  }

  // 定义getter，返回类型化的FormArray
  get currencies(): FormArray<CurrencyFormGroup> {
    return this.currencyForm.get('currencies') as FormArray<CurrencyFormGroup>;
  }

  // 添加/删除方法保持原有逻辑即可
  addCurrency() {
    this.currencies.push(this.fb.group({
      code: ['', Validators.required],
      label: ['', Validators.required]
    }));
  }

  removeCurrency(index: number) {
    this.currencies.removeAt(index);
  }
}

2. 模板中正确访问控件属性 #

此时模板遍历currencies.controls时，每个currency的类型会被自动推断为CurrencyFormGroup，可以直接通过controls访问子控件的状态：

<form [formGroup]="currencyForm">
  <div formArrayName="currencies">
    <div *ngFor="let currency of currencies.controls; let i = index" [formGroupName]="i">
      <input 
        formControlName="code"
        class="form-control"
        [class.is-invalid]="currency.controls.code.invalid && currency.controls.code.touched"
        placeholder="货币编码"
      >
      <div *ngIf="currency.controls.code.invalid && currency.controls.code.touched" class="invalid-feedback">
        货币编码不能为空
      </div>

      <input 
        formControlName="label"
        class="form-control"
        [class.is-invalid]="currency.controls.label.invalid && currency.controls.label.touched"
        placeholder="货币名称"
      >
      <div *ngIf="currency.controls.label.invalid && currency.controls.label.touched" class="invalid-feedback">
        货币名称不能为空
      </div>

      <button (click)="removeCurrency(i)">删除</button>
    </div>
  </div>
  <button (click)="addCurrency()">添加货币</button>
</form>

临时替代方案（不推荐） #

如果不想修改组件类型定义，也可以在模板中用$any()跳过类型检查，但会失去类型化表单的类型校验优势：

[class.is-invalid]="$any(currency).controls.code.invalid && $any(currency).controls.code.touched"

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