Angular 13.3.0遍历FormArray报错：Property 'controls'不存在，如何解决？

问题原因 #

formMain.get('items')返回的类型是AbstractControl | null，而controls是FormArray独有的属性，TypeScript无法推断这个返回值的具体类型，因此抛出类型错误。

解决方案1：组件内添加FormArray类型的Getter（推荐） #

在组件类中定义一个getter方法，明确返回FormArray类型，让模板可以直接安全访问controls属性：

组件代码修改：

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

constructor(private fb: FormBuilder) {}

formMain = this.fb.group({
  title: ['', Validators.required],
  description: ['', Validators.required],
  currency: ['USD'],
  items: new FormArray([]),
});

// 新增Getter，明确返回FormArray类型
get itemsFormArray(): FormArray {
  return this.formMain.get('items') as FormArray;
}

// 补充addField方法示例，设置输入框初始值
addField(): void {
  this.itemsFormArray.push(this.fb.control('foo'));
}

模板代码修改：

<form [formGroup]="formMain">
  <button (click)="addField()">Add Fields</button>
  <div formArrayName="items">
    <ng-container *ngFor="let item of itemsFormArray.controls; let i = index">
      <input type="text" [formControlName]="i">
    </ng-container>
  </div>
</form>

这里用formControlName结合循环索引i是更规范的写法，同时把初始值foo放在addField方法中设置，由表单控件统一管理值。

解决方案2：模板内直接类型断言 #

如果不想修改组件类，可以在模板中对formMain.get('items')进行类型断言，明确它是FormArray：

<form [formGroup]="formMain">
  <button (click)="addField()">Add Fields</button>
  <div formArrayName="items">
    <ng-container *ngFor="let item of (formMain.get('items') as FormArray).controls">
      <input type="text" [formControl]="item">
    </ng-container>
  </div>
</form>

这种方法虽然能解决问题，但模板代码可读性较差，不推荐在复杂场景中使用。

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