如何为Angular嵌套表单数组(FormArray)添加自定义总额匹配校验？

该需求完全可以在Angular嵌套表单数组中实现，基于响应式表单原生的跨组校验能力即可完成，不需要引入额外依赖。

• 跨字段、跨数组的校验不要绑定在单个字段控件上，需要绑定在同时包含总配额字段、子项配额表单数组的共同父级FormGroup上，确保校验逻辑能同时获取两边的数据源
• 把父组的校验触发时机配置为updateOn: 'submit'，刚好匹配点击保存按钮才触发校验提示的要求，避免用户输入过程中频繁弹出提示
• 计算子项配额总和时，要做数字转换和空值兜底，避免空输入导致NaN，造成比对逻辑失效

表单定义与自定义校验器 #

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

// 自定义总配额匹配校验器
const totalQuotaMatchValidator = (control: AbstractControl): Record<string, boolean> | null => {
  // 获取总配额输入值，空值按0处理
  const totalInput = Number(control.get('totalQuota')?.value ?? 0);
  // 获取子项表单数组
  const itemList = control.get('itemQuotas') as FormArray;
  // 累加所有子项的配额值
  const itemSum = itemList.controls.reduce((acc, itemCtrl) => {
    return acc + Number(itemCtrl.get('quota')?.value ?? 0);
  }, 0);
  // 值相等无错误，否则返回错误标识
  return totalInput === itemSum ? null : { quotaNotMatch: true };
};

// 初始化表单结构
quotaForm = new FormGroup({
  totalQuota: new FormControl<number | null>(null, [Validators.required, Validators.min(0)]),
  itemQuotas: new FormArray<FormGroup>([
    // 初始子项，可根据业务动态增删
    new FormGroup({
      quota: new FormControl<number | null>(null, [Validators.required, Validators.min(0)])
    })
  ])
}, {
  validators: totalQuotaMatchValidator,
  updateOn: 'submit' // 配置为提交时才触发校验
});

模板部分 #

<!-- 总配额输入区域 -->
<div>
  <label>总配额</label>
  <input type="number" formControlName="totalQuota" placeholder="请输入总配额">
  <!-- 校验提示 -->
  <div *ngIf="quotaForm.errors?.quotaNotMatch && quotaForm.touched" class="error-tip">
    * 总配额必须与所有子项配额累加值一致
  </div>
</div>

<!-- 子项表单数组区域 -->
<div formArrayName="itemQuotas" class="form-list">
  <div *ngFor="let item of quotaForm.controls.itemQuotas.controls; let idx = index" [formGroupName]="idx" class="form-item">
    <label>子项{{idx + 1}}配额</label>
    <input type="number" formControlName="quota" placeholder="请输入子项配额">
  </div>
  <!-- 动态增删子项的按钮按业务需求添加即可，不影响校验逻辑 -->
</div>

<!-- 保存按钮 -->
<button (click)="handleSave()">保存</button>

保存触发逻辑 #

handleSave() {
  // 标记所有控件为已交互状态，触发展示校验错误
  this.quotaForm.markAllAsTouched();
  if (this.quotaForm.invalid) return;

  // 校验通过后执行后续保存接口调用逻辑
  const formValue = this.quotaForm.getRawValue();
  console.log('提交的表单值', formValue);
}

• 支持子项动态增删场景：校验器会在提交时自动遍历最新的表单数组项做累加计算，不需要额外绑定值变更监听
• 如果需要调整校验触发时机，比如输入框失焦就校验，把updateOn配置改为blur即可
• 如果存在多层嵌套的表单数组，只需要把校验器绑定到能覆盖所有待比对控件的最邻近父FormGroup上，逻辑完全一致

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