Angular响应式表单自定义验证器已触发但错误不显示问题

核心问题定位 #

你的验证器是表单组级别的验证器，错误会挂载在整个FormGroup实例上，而非单个表单控件，这是错误无法显示的最常见原因。结合你的代码，以下是具体排查和修复步骤：

1. 修正模板中的错误绑定逻辑 #

确保模板中是从表单组而非单个控件获取验证错误：

<!-- 示例：展示表单级别的验证错误 -->
<div *ngIf="form.invalid && form.touched">
  <div *ngIf="form.hasError('greaterThan')">
    最小值不能大于或等于最大值
  </div>
  <div *ngIf="form.hasError('missingValue')">
    最小值和最大值不能为空（最小值为0时除外）
  </div>
  <div *ngIf="form.hasError('onlyNumbersRequired')">
    请输入有效的数字
  </div>
</div>

如果错误提示绑定在minimum或maximum控件上（比如form.get('minimum').hasError(...)），自然无法获取到表单组级别的验证错误。

2. 同步控件禁用状态与验证逻辑 #

当前代码中minimum和maximum初始为禁用状态，即使ruleEnabled设为true，用户也无法输入值，验证器会持续返回missingValue错误。需要添加状态切换逻辑：

// 在表单初始化后添加监听
this.form.get('ruleEnabled').valueChanges.subscribe(enabled => {
  const minCtrl = this.form.get('minimum');
  const maxCtrl = this.form.get('maximum');
  
  // 启用/禁用数值控件
  enabled ? minCtrl.enable() : minCtrl.disable();
  enabled ? maxCtrl.enable() : maxCtrl.disable();
  
  // 状态切换时强制触发表单验证更新
  this.form.updateValueAndValidity({ emitEvent: false });
});

3. 优化验证器的错误清除逻辑 #

当ruleEnabled切换为false时，需确保表单组的错误被完全清除：

export const stockThresholdValidator: ValidatorFn = (formGroup: FormGroup) => {
  const ruleEnabled = formGroup.get('ruleEnabled');
  if (!ruleEnabled || !ruleEnabled.value) {
    // 清除所有表单级验证错误
    formGroup.setErrors(null);
    return null;
  }
  return greaterThanValidator('minimum', 'maximum')(formGroup);
};

4. 验证禁用控件的取值问题 #

Angular中禁用控件的value不会出现在form.value中，但通过form.get('minimum').value仍可获取到值，你的验证器逻辑在此处是正常的，但需确保当控件启用后，用户输入能触发验证器重新执行（上述updateValueAndValidity已覆盖此场景）。

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