Angular响应式表单动态FormArray字段自定义验证如何实现

1. 编写组级自定义验证器 #

首先实现针对每个包含三个字段的FormGroup的联动验证器，直接在组层面判断字段填写状态：

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

// 三字段联动验证规则：仅全空或全填时合法
export const threeFieldCoValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const group = control as FormGroup;
  const field1 = group.get('field1')?.value;
  const field2 = group.get('field2')?.value;
  const field3 = group.get('field3')?.value;

  // 统计非空字段数量，可根据业务调整空值判断逻辑（如空字符串、0是否算空）
  const filledCount = [field1, field2, field3].filter(val => val != null && val !== '').length;

  if (filledCount === 0 || filledCount === 3) {
    return null;
  }
  return { partialFill: true };
};

2. 给动态生成的FormGroup绑定验证器 #

修改你的createItem1方法，在创建FormGroup时传入上面的验证器即可，后续动态新增的条目会自动继承该验证规则：

createItem1(): FormGroup {
   return this.fb.group({
       field1: null,
       field2: null,
       field3: null,
   }, { validators: threeFieldCoValidator });
}

3. 模板错误提示示例（可选） #

你可以直接在模板中根据验证状态展示提示，不需要额外修改组件逻辑：

<div formArrayName="item1">
  <div *ngFor="let item of formA.get('item1')?.controls; let i = index" [formGroupName]="i">
    <input formControlName="field1" placeholder="字段1">
    <span *ngIf="!item.get('field1')?.value && item.hasError('partialFill')">必填</span>

    <input formControlName="field2" placeholder="字段2">
    <span *ngIf="!item.get('field2')?.value && item.hasError('partialFill')">必填</span>

    <input formControlName="field3" placeholder="字段3">
    <span *ngIf="!item.get('field3')?.value && item.hasError('partialFill')">必填</span>

    <p *ngIf="item.hasError('partialFill')">当前条目要么三个字段全不填，要么全部填写</p>
  </div>
</div>

补充说明 #

该实现不需要手动处理动态增删条目的验证逻辑，所有新增的FormGroup都会自动携带联动验证规则，表单的valid状态会实时同步，只有所有条目都满足规则时，整个formA才会变为合法状态。

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