Angular表单组自定义校验器：为温度控件设minTemperature错误（禁用setErrors）

问题核心：FormGroup的自定义校验器返回的错误属于表单组层级，不会自动关联到子控件，因此temperature控件不会被标记为无效，自然无法触发模板错误提示和pInputText的样式变化。以下是符合要求的实现方案：

实现步骤 #

1. 创建依赖于单位控件的温度校验器工厂 #

通过工厂函数接收温度单位控件，返回针对温度控件的校验逻辑，无需使用setErrors：

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

function minTemperatureValidator(unitControl: AbstractControl): ValidatorFn {
  return (temperatureControl: AbstractControl): ValidationErrors | null => {
    // 无值时跳过校验
    if (!temperatureControl.value || !unitControl.value) return null;

    const temp = parseFloat(temperatureControl.value);
    const unit = unitControl.value;

    // 校验规则：C<26 或 F<80时返回错误
    if ((unit === 'C' && temp < 26) || (unit === 'F' && temp < 80)) {
      return { minTemperature: true };
    }
    return null;
  };
}

2. 构建表单并绑定校验器 #

将校验器直接绑定到temperature控件，确保错误属于控件自身：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// 组件类内部
myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    temperatureUnit: ['C'], // 默认选中摄氏度
    temperature: ['', Validators.required]
  });

  // 为温度控件添加依赖校验器
  const tempControl = this.myForm.get('temperature');
  const unitControl = this.myForm.get('temperatureUnit');
  if (tempControl && unitControl) {
    tempControl.addValidators(minTemperatureValidator(unitControl));
  }
}

3. 监听单位变化，触发温度控件重新校验 #

当切换温度单位时，手动触发温度控件的校验更新：

ngOnInit(): void {
  this.myForm.get('temperatureUnit')?.valueChanges.subscribe(() => {
    // 更新校验状态，不触发valueChanges事件避免循环
    this.myForm.get('temperature')?.updateValueAndValidity({ emitEvent: false });
  });
}

4. 模板绑定错误提示与控件 #

直接基于temperature控件的错误状态渲染提示和样式：

<form [formGroup]="myForm">
  <!-- 温度单位选择 -->
  <div>
    <label>温度单位:</label>
    <select formControlName="temperatureUnit">
      <option value="C">摄氏度(C)</option>
      <option value="F">华氏度(F)</option>
    </select>
  </div>

  <!-- 温度输入框 -->
  <div>
    <label>温度:</label>
    <input 
      type="number" 
      formControlName="temperature" 
      pInputText
    >
    <!-- 错误提示 -->
    <div *ngIf="myForm.get('temperature')?.hasError('minTemperature')">
      温度不能低于{{ myForm.get('temperatureUnit')?.value === 'C' ? 26 : 80 }}{{ myForm.get('temperatureUnit')?.value }}
    </div>
  </div>
</form>

方案说明 #

• 校验器直接绑定在temperature控件上，错误会被添加到控件的errors对象中，控件自动标记为invalid，触发pInputText的红色边框样式。
• 通过监听单位控件的变化，确保单位切换时温度控件重新校验，保证校验逻辑实时生效。
• 全程未使用setErrors方法，完全符合需求。

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