Angular自定义表单验证问题：最大值小于最小值需提示错误

你当前的问题在于单个控件的验证器无法访问表单组内的其他控件值，要实现maximumCharacters小于minimumCharacters时的错误提示，需要使用表单组级别的验证器，而非单个控件的验证器。

步骤1：编写跨控件验证器 #

替换原来的maximumCharactersValidator，改成针对表单组的验证函数：

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

export function maxGreaterThanMinValidator(control: AbstractControl): ValidationErrors | null {
  const minControl = control.get('minimumCharacters');
  const maxControl = control.get('maximumCharacters');

  // 先判断两个控件都有值（因为都是必填），再比较大小
  if (minControl?.value != null && maxControl?.value != null) {
    const minValue = Number(minControl.value);
    const maxValue = Number(maxControl.value);
    if (maxValue < minValue) {
      // 给max控件添加错误标记
      maxControl.setErrors({ maxLessThanMin: true });
      return { maxLessThanMin: true };
    } else {
      // 如果验证通过，清除max控件的错误（避免残留）
      if (maxControl.hasError('maxLessThanMin')) {
        maxControl.setErrors(null);
      }
      return null;
    }
  }
  return null;
}

步骤2：修改表单定义 #

将验证器添加到表单组的validators配置中，而非单个控件：

// 创建表单组时直接添加验证器
this.form = this.formBuilder.group({
  minimumCharacters: [1, [Validators.required]],
  maximumCharacters: ['', [Validators.required]]
}, { 
  validators: [maxGreaterThanMinValidator],
  emitEvent: false 
});

注：如果是后续动态添加控件，也可以通过this.form.setValidators([maxGreaterThanMinValidator])来设置表单组验证器。

步骤3：模板中显示错误信息 #

在模板里针对maximumCharacters控件判断错误并显示提示：

<input formControlName="maximumCharacters" type="number">
<div *ngIf="form.get('maximumCharacters')?.hasError('maxLessThanMin')">
  最大值不能小于最小值
</div>
<div *ngIf="form.get('maximumCharacters')?.hasError('required')">
  最大值为必填项
</div>

关键说明 #

• 表单组验证器可以访问整个表单的所有控件，因此能动态获取minimumCharacters的实时值。
• 验证时要先确保两个控件都有值（因为都是必填），避免空值转换为数字时的异常。
• 验证通过时要手动清除maximumCharacters的错误，防止错误状态残留。

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