Angular跨字段验证中如何标记Bootstrap输入框为无效状态

问题核心是：FormGroup级的验证器只会修改表单组自身的错误状态，不会自动修改内部单个FormControl的状态，且Angular不会主动把框架层的校验错误同步到原生DOM的ValidityState上，因此原生:valid/:invalid伪类不会响应组级校验错误。
可以根据需求选择以下两种实现方案：

方案1：通过Angular样式类实现高亮（推荐） #

这是Angular响应式表单的通用实现，不需要依赖原生伪类，兼容性和可维护性更好。

1. 首先修改跨字段验证器，在校验失败时给两个关联控件单独设置错误，校验通过时清除对应错误，注意不要覆盖控件自身的其他校验规则：

checkFromIsLowerThanTo(group: FormGroup): ValidationErrors | null {
  const fromControl = group.get('from')!;
  const toControl = group.get('to')!;
  const fromVal = Number(fromControl.value);
  const toVal = Number(toControl.value);

  if (fromVal >= toVal) {
    // 保留控件原有错误，追加跨字段错误标记
    fromControl.setErrors({ ...fromControl.errors, lowerIsHigherThanUpper: true });
    toControl.setErrors({ ...toControl.errors, lowerIsHigherThanUpper: true });
    return { lowerIsHigherThanUpper: true };
  } else {
    // 仅清除当前跨字段错误，不影响其他校验规则
    const clearFieldError = (control: FormControl) => {
      const errors = control.errors;
      if (!errors) return;
      delete errors.lowerIsHigherThanUpper;
      control.setErrors(Object.keys(errors).length ? errors : null);
    }
    clearFieldError(fromControl);
    clearFieldError(toControl);
    return null;
  }
}

2. 模板中给控件绑定is-invalid类，利用已有的.custom-select.is-invalid样式实现红色高亮，样式优先级高于:valid伪类，会直接覆盖原有绿色样式：

<select formControlName="from" class="custom-select" 
  [class.is-invalid]="myForm.get('from').invalid && myForm.touched">
</select>

<select formControlName="to" class="custom-select"
  [class.is-invalid]="myForm.get('to').invalid && myForm.touched">
</select>

<!-- 原有错误提示保留即可 -->
<div *ngIf="myForm.hasError('lowerIsHigherThanUpper')">
  Lower bound is higher than upper
</div>

方案2：同步原生校验状态触发:invalid伪类 #

如果必须使用原生was-validated类配合:valid/:invalid伪类的样式逻辑，可以通过监听表单状态，调用setCustomValidity同步错误到原生DOM：

1. 模板中给两个控件添加模板引用变量，用于获取原生DOM元素：

<select #fromInput formControlName="from" class="custom-select"></select>
<select #toInput formControlName="to" class="custom-select"></select>

2. 在组件中获取DOM引用，监听表单状态变化同步自定义校验信息：

import { ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';

// 组件类内
@ViewChild('fromInput') fromInput!: ElementRef<HTMLSelectElement>;
@ViewChild('toInput') toInput!: ElementRef<HTMLSelectElement>;
private destroy$ = new Subject<void>();

ngOnInit() {
  // 表单状态变更时同步原生校验状态
  this.myForm.statusChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => {
      const errorMsg = 'Lower bound is higher than upper';
      const fromEl = this.fromInput.nativeElement;
      const toEl = this.toInput.nativeElement;

      if (this.myForm.hasError('lowerIsHigherThanUpper')) {
        fromEl.setCustomValidity(errorMsg);
        toEl.setCustomValidity(errorMsg);
      } else {
        // 清空自定义错误，恢复原生valid状态
        fromEl.setCustomValidity('');
        toEl.setCustomValidity('');
      }
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

注意：不要在验证器函数中直接操作DOM调用setCustomValidity，验证器应该是纯函数，只负责返回校验结果，直接操作DOM会违反Angular设计规范，还可能引发变更检测异常。

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