如何在 Angular 表单数组中为每个控件设置必填验证？

在Angular的动态表单场景中，FormArray可以用来管理一组同类型的表单控件，当我们需要为数组中的每个控件都添加必填验证时，可以通过初始化配置和动态添加时的规则附加来实现，下面详细介绍具体步骤。

表单数组基础概念

Angular的响应式表单中，FormArray是AbstractControl的子类，用于管理一组有序的表单控件，这些控件可以是FormControl、FormGroup甚至是嵌套的FormArray。要操作表单数组，首先需要在组件中引入相关的表单模块：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  // 声明表单数组
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      // 初始化表单数组，初始包含一个带必填验证的控件
      items: new FormArray([
        new FormControl('', Validators.required)
      ])
    });
  }

  // 获取表单数组的便捷方法
  get itemsArray() {
    return this.form.get('items') as FormArray;
  }
}

初始化时为所有控件设置必填验证

如果表单数组在初始化时就已经确定了所有控件，那么可以在创建FormArray时，为每个FormControl都传入Validators.required作为验证器，这样所有初始控件都会自带必填验证规则。

上面的示例代码中，我们在初始化items表单数组时，第一个控件就添加了必填验证，如果需要初始化多个控件，只需要按照相同的方式添加即可：

// 初始化包含3个带必填验证控件的表单数组
this.form = new FormGroup({
  items: new FormArray([
    new FormControl('', Validators.required),
    new FormControl('', Validators.required),
    new FormControl('', Validators.required)
  ])
});

动态添加控件时附加必填验证

表单数组的常见使用场景是支持用户动态添加控件，这时候需要在新增控件的方法中，为新创建的FormControl添加必填验证，再推入表单数组中，这样新增的控件也会自动具备必填校验规则。

我们可以在组件中添加如下的动态添加控件方法：

// 动态添加带必填验证的控件到表单数组
addNewItem() {
  // 创建新的表单控件，附加必填验证
  const newControl = new FormControl('', Validators.required);
  // 将新控件推入表单数组
  this.itemsArray.push(newControl);
}

如果需要移除表单数组中的控件，可以调用removeAt方法，指定要移除的索引即可：

// 移除指定索引的控件
removeItem(index: number) {
  this.itemsArray.removeAt(index);
}

模板中绑定表单数组并展示验证状态

在组件的模板文件中，我们需要遍历表单数组，为每个控件生成对应的表单元素，同时根据控件的验证状态展示错误提示。注意模板中需要使用formArrayName指令来绑定表单数组，遍历时使用ngFor配合controls属性。

<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of itemsArray.controls; let i = index">
      <div [formGroupName]="i">
        <label>项目{{i + 1}}：</label>
        <input type="text" [formControlName]="i" placeholder="请输入内容">
        <!-- 验证失败且控件被触碰过时展示错误提示 -->
        <div *ngIf="itemsArray.controls[i].invalid && itemsArray.controls[i].touched" style="color: red;">
          该项为必填项
        </div>
        <button type="button" (click)="removeItem(i)">删除</button>
      </div>
    </div>
  </div>
  <button type="button" (click)="addNewItem()">添加新项目</button>
  <button type="submit" [disabled]="form.invalid">提交</button>
</form>

验证规则说明

上述实现中，Validators.required是Angular内置的必填验证器，当控件的值为空、null或者undefined时，会标记该控件为无效状态。我们可以通过FormControl的valid、invalid、touched等属性获取控件的验证状态：

• valid：控件验证通过时为true
• invalid：控件验证失败时为true
• touched：控件被用户触碰过（聚焦后失焦）时为true
• pristine：控件值未被修改过时为true

如果需要在表单提交时触发所有控件的验证提示，可以遍历表单数组中的所有控件，调用markAsTouched方法：

// 提交表单时标记所有控件为触碰状态
onSubmit() {
  if (this.form.invalid) {
    // 遍历表单数组所有控件，标记为触碰
    this.itemsArray.controls.forEach(control => {
      control.markAsTouched();
    });
    return;
  }
  // 表单验证通过后的处理逻辑
  console.log('表单提交数据：', this.form.value);
}

常见问题说明

很多开发者会遇到动态添加的控件没有验证效果的问题，通常是因为新增控件时没有传入Validators.required验证器，或者模板中绑定的formControlName索引和数组索引不匹配。另外需要注意，表单数组的验证器和内部控件的验证器是独立的，如果需要为整个表单数组添加验证（比如至少包含一个控件），可以给FormArray本身添加验证器，这和单个控件的必填验证是不冲突的。

Angular表单数组必填验证FormArrayFormControl修改时间：2026-07-09 22:36:40