Angular 19中使用@for迭代FormArray controls报错的问题求助

问题场景 #

我创建了包含FormArray类型hobbies字段的FormGroup，TS中实现了增删方法，使用*ngFor可以正常遍历hobbies.controls，但改用Angular新的@for语法时出现报错：

Type Array<AbstractControl<any>> must have a [Symbol.iterator]() method that returns an iterator.

相关代码 #

TS代码

// 表单构建方法
getUserInfoForm(data?: UserInfo) {
  return this.formBuilder.group({
    name: [data?.name ?? null, [Validators.required]],
    age: [data?.age ?? null, [Validators.required, Validators.min(18),Validators.max(99)]],
    gender: [data?.gender ?? null, [Validators.required]],
    hobbies: this.formBuilder.array([]),
  })
}

// 组件内逻辑
ngOnInit() {
  this.userInfo = this.formsService.getUserInfoForm();
  this.addHobby();
}

getHobbies(): FormArray{
  return this.userInfo.get('hobbies') as FormArray;
}

addHobby(data?: string) {
  this.getHobbies().push(new FormControl(data ?? ''))
}

removeHobby(index: number) {
  this.getHobbies().removeAt(index);
}

报错的@for模板代码

<div class="col-12 d-flex justify-content-between">
  <label>Hobbies</label>
  @for(hobby of getHobbies().controls; track $index) {
    <div class="d-flex gap-5 justify-content-start w-50">
      <input class="form-control w-50" type="text" name="hobby" formControlName="hobby">
      <button class="btn btn-primary">Add</button>
      <button class="btn btn-secondary">Remove</button>
    </div>
  }
</div>

报错原因 #

1. @for类型检查更严格：FormArray.controls本质是数组，但Angular类型定义未显式标记其为可迭代对象，导致@for无法识别迭代器。
2. 缺少FormArray绑定指令：模板遗漏formArrayName="hobbies"，这是FormArray与模板绑定的必要指令，无此指令表单控件无法正确关联。
3. formControlName绑定错误：formControlName="hobby"写法错误，FormArray子控件需通过索引值绑定，而非变量名。

解决步骤与修正代码 #

方案1：直接修正模板逻辑 #

将getHobbies().controls转换为可迭代数组，添加formArrayName指令，修正formControlName绑定，并绑定按钮点击事件：

<div class="col-12 d-flex justify-content-between" formArrayName="hobbies">
  <label>Hobbies</label>
  @for(hobby of Array.from(getHobbies().controls); track $index) {
    <div class="d-flex gap-5 justify-content-start w-50">
      <input class="form-control w-50" type="text" [formControlName]="$index">
      <button class="btn btn-primary" (click)="addHobby()">Add</button>
      <button class="btn btn-secondary" (click)="removeHobby($index)">Remove</button>
    </div>
  }
</div>

方案2：TS中添加数组类型getter（优化写法） #

在组件内新增返回数组类型的getter，让@for直接识别：

get hobbyControls(): AbstractControl[] {
  return this.getHobbies().controls as AbstractControl[];
}

模板修改为：

<div class="col-12 d-flex justify-content-between" formArrayName="hobbies">
  <label>Hobbies</label>
  @for(hobby of hobbyControls; track $index) {
    <div class="d-flex gap-5 justify-content-start w-50">
      <input class="form-control w-50" type="text" [formControlName]="$index">
      <button class="btn btn-primary" (click)="addHobby()">Add</button>
      <button class="btn btn-secondary" (click)="removeHobby($index)">Remove</button>
    </div>
  }
</div>

关键说明 #

• formArrayName="hobbies"必须添加在@for的父容器上，确保表单控件与FormArray正确关联。
• track $index是@for语法必填项，用索引作为跟踪标识适配动态增删的列表场景。
• [formControlName]="$index"通过索引绑定FormArray子控件，逻辑与*ngFor中的[formControlName]="i"一致。

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