Angular中FormArray仅包含FormControl时的HTML遍历方法及报错解决方案

嘿，我来帮你搞定这两个Angular表单的问题，都是FormArray直接用FormControl的常见场景，咱们一步步来：

当你的FormArray里只有FormControl（没有嵌套FormGroup）时，核心是先通过formArrayName指令把数组和DOM绑定，然后遍历它的controls集合，用索引来关联每个FormControl。

先看TS里的示例定义 #

假设你的组件里是这样定义表单的：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  myForm = this.fb.group({
    // 定义一个只包含FormControl的FormArray
    items: this.fb.array([
      new FormControl('第一个值'),
      new FormControl('第二个值'),
      new FormControl('第三个值')
    ])
  });

  get itemsArray(): FormArray {
    return this.myForm.get('items') as FormArray;
  }

  constructor(private fb: FormBuilder) {}
}

对应的HTML遍历写法 #

在模板里，要先确保外层表单绑定了[formGroup]，然后用formArrayName指定数组名，再通过*ngFor遍历itemsArray.controls，同时拿到索引：

<form [formGroup]="myForm">
  <!-- 绑定FormArray -->
  <div formArrayName="items">
    <!-- 遍历每个FormControl -->
    <div *ngFor="let control of itemsArray.controls; let i = index">
      <input type="text" [formControl]="control">
      <!-- 或者也可以用formControlName绑定索引 -->
      <!-- <input type="text" formControlName="{{i}}"> -->
    </div>
  </div>
</form>

两种写法都可行：用[formControl]="control"直接绑定控件实例，或者用formControlName="{{i}}"通过索引关联，效果是一样的。

这个错误的核心是你的FormControl没有处于正确的表单上下文里——Angular要求formControlName必须在formGroup或formArrayName的作用域内，哪怕你的FormArray里没有FormGroup，只要你没正确绑定formArrayName，就会触发这个错误。

错误场景分析（对应你提到的代码问题） #

比如如果你的HTML是这样写的（错误示例）：

<!-- 错误：直接遍历controls，但没指定formArrayName -->
<form [formGroup]="myForm">
  <div *ngFor="let control of itemsArray.controls">
    <input type="text" formControlName="???"> <!-- 这里没有正确的上下文 -->
  </div>
</form>

这时候Angular找不到formControlName所属的表单容器，就会报错。

正确的解决方式（无需FormGroup） #

只要给你的FormArray加上formArrayName指令，让每个FormControl处于这个数组的上下文中即可，和问题1的写法一致：

<form [formGroup]="myForm">
  <!-- 关键：添加formArrayName，指定数组名 -->
  <div formArrayName="items">
    <div *ngFor="let control of itemsArray.controls; let i = index">
      <!-- 两种绑定方式任选其一 -->
      <input type="text" [formControl]="control">
      <!-- 或者 -->
      <input type="text" formControlName="{{i}}">
    </div>
  </div>
</form>

这样每个输入框都处于formArrayName="items"的作用域内，Angular就能正确识别FormControl，不会再要求你套FormGroup了。

额外提醒：动态添加控件的情况 #

如果需要动态给FormArray加控件，你可以在TS里写一个方法：

addNewItem() {
  this.itemsArray.push(new FormControl(''));
}

然后在HTML里加个按钮触发：

<button (click)="addNewItem()">添加新项</button>

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