Angular模板驱动表单自定义验证器百分比总和校验问题排查

自定义校验指令异常的核心原因有三点，和你写的checkPercentage函数的运行环境差异直接相关：

• 你将存储输入值的数组定义在了指令实例属性上，每次校验触发时没有做清空重置，还把表单控件自带的原生属性、状态字段等非输入值的键值对也推入了数组，导致计算数据源错误
• 校验指令错误绑定在了单个输入控件层级，触发校验时只能拿到当前输入框的值，无法稳定获取同组所有输入的最新值
• 没有按照Angular内置校验器的规范返回校验结果，错误状态无法同步到表单的errors对象中，自然没法和required/min/max等规则一样触发错误提示

1. 调整指令绑定层级 #

不要把自定义校验指令加在单个input[ngModel]上，直接绑定到每个步进步骤对应的ngModelGroup节点上，这样校验触发时可以直接拿到同组所有控件的实时值，不需要额外维护全局数组存值，从根源上避免重复推值、数组重复生成的问题。

2. 重写自定义校验指令 #

完全对齐你原有checkPercentage的计算逻辑，每次校验时直接从当前表单分组的控件集合中遍历取值计算，不做持久化的值存储：

import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';

// 校验逻辑和原有checkPercentage完全对齐
export function percentageSumValidator(targetTotal: number = 100): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 每次校验实时遍历同组控件，取最新输入值，无需额外维护存储数组
    const valueList = Object.values(control.controls || {})
      .map(controlItem => Number(controlItem.value) || 0);
    // 计算总和，兼容浮点数精度问题
    const currentTotal = valueList.reduce((sum, cur) => sum + cur, 0);
    // 符合要求返回null，不符合返回标准格式的错误对象，和内置校验规则兼容
    return Math.abs(currentTotal - targetTotal) < Number.EPSILON ? null : {
      percentageSum: {
        expected: targetTotal,
        actual: currentTotal
      }
    };
  };
}

@Directive({
  selector: '[percentageSum]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: PercentageSumValidatorDirective,
      multi: true
    }
  ]
})
export class PercentageSumValidatorDirective implements Validator {
  @Input('percentageSum') targetTotal = 100;

  validate(control: AbstractControl): ValidationErrors | null {
    return percentageSumValidator(this.targetTotal)(control);
  }

  // 注册变更回调，保证输入变化时校验状态实时更新
  registerOnValidatorChange(fn: () => void): void {}
}

3. 模板层调整写法 #

把校验指令移到表单分组节点，错误提示绑定分组的错误状态即可，写法和内置校验完全一致：

<!-- 步进器单步对应的表单分组 -->
<div ngModelGroup="stepOne" #stepOneGroup="ngModelGroup" [percentageSum]="100">
  <!-- 组内百分比输入框正常绑定ngModel即可，无需逐个加校验指令 -->
  <input type="number" name="ratio1" [(ngModel)]="formData.stepOne.ratio1">
  <input type="number" name="ratio2" [(ngModel)]="formData.stepOne.ratio2">
  <input type="number" name="ratio3" [(ngModel)]="formData.stepOne.ratio3">

  <!-- 错误提示，逻辑和required等内置规则完全一致 -->
  <div *ngIf="stepOneGroup.errors?.percentageSum && stepOneGroup.touched" class="error-text">
    当前步骤百分比总和需为100%，当前计算值为{{ stepOneGroup.errors.percentageSum.actual }}%
  </div>
</div>

• 完全规避了数组重复推入值、每次输入生成新数组的问题，取值逻辑和你正常运行的checkPercentage函数完全一致
• 校验规则返回的错误格式符合Angular表单规范，错误提示的显隐逻辑和内置校验规则没有差异
• 多步进场景下每个分组的校验逻辑互相独立，不会跨步骤串值

如果分组内存在不需要参与百分比计算的输入字段，可以给参与计算的输入加自定义标记属性，在校验器遍历控件时过滤掉无标记的控件即可，不会影响其他字段的正常使用。

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