Angular异步校验器引发statusChanges错误闪烁问题求解

问题原因 #

当使用AsyncValidator时，控件失焦会触发三次状态变更：

1. 首次statusChanges：控件进入PENDING状态，此时错误数组被清空，已显示的错误消息消失
2. 执行AsyncValidator异步校验逻辑
3. 再次statusChanges：校验完成，控件状态变为INVALID（存在重复名称时），错误数组重新生成，错误消息再次显示

这一过程中错误消息先消失再出现，就产生了闪烁现象。

解决方案 #

方法1：过滤PENDING状态的变更 #

在订阅statusChanges时，直接跳过PENDING状态的更新，只处理校验完成后的状态（VALID/INVALID），避免在校验过程中清空错误消息。

修改TypeScript代码：

import { filter } from 'rxjs';

ngOnChanges(changes: SimpleChanges): void {
  this.control.statusChanges.pipe(
    untilDestroyed(this),
    // 过滤掉异步校验中的PENDING状态
    filter(status => status !== 'PENDING')
  ).subscribe(() => {
    const newErrors: string[] = Object.keys(this.control.errors || {}).map((error) => {
      if (this.control.errors[error].message) {
        return this.control.errors[error].message;
      }
      return this.getDefaultError(error as DefaultValidationError);
    });
    this.messages = newErrors;
  });
}

方法2：使用自定义管道直接在模板处理错误消息 #

避免维护额外的messages数组，通过管道直接将控件错误转换为显示文本，利用Angular模板的变更检测机制自动处理状态变化，同时mat-error默认只会在控件INVALID且已触摸/提交时显示，天然规避PENDING状态的干扰。

1. 创建错误消息管道：

import { Pipe, PipeTransform } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Pipe({ name: 'errorMessages' })
export class ErrorMessagesPipe implements PipeTransform {
  transform(control: AbstractControl): string[] {
    if (!control.errors || control.status === 'PENDING') return [];
    
    return Object.keys(control.errors).map(errorKey => {
      const error = control.errors[errorKey];
      return error.message ? error.message : this.getDefaultError(errorKey);
    });
  }

  private getDefaultError(errorKey: string): string {
    // 根据你的校验规则返回默认错误文本
    switch(errorKey) {
      case 'required': return '此字段不能为空';
      case 'duplicateName': return '该名称已存在';
      default: return '输入格式无效';
    }
  }
}

2. 在模板中使用管道：

<mat-error *ngFor="let message of control | errorMessages">
  <span [innerHTML]="message"></span>
</mat-error>

方法3：对比错误内容避免重复更新 #

使用distinctUntilChanged操作符，只有当错误内容真正发生变化时才更新messages数组，跳过无意义的空错误数组更新。

import { distinctUntilChanged } from 'rxjs';

ngOnChanges(changes: SimpleChanges): void {
  let prevErrors = this.control.errors;
  this.control.statusChanges.pipe(
    untilDestroyed(this),
    distinctUntilChanged((_, __) => {
      // 对比前后错误对象的字符串化结果，判断是否需要更新
      const currentErrors = this.control.errors;
      const isSame = JSON.stringify(currentErrors) === JSON.stringify(prevErrors);
      prevErrors = currentErrors;
      return isSame;
    })
  ).subscribe(() => {
    const newErrors: string[] = Object.keys(this.control.errors || {}).map((error) => {
      if (this.control.errors[error].message) {
        return this.control.errors[error].message;
      }
      return this.getDefaultError(error as DefaultValidationError);
    });
    this.messages = newErrors;
  });
}

推荐方案 #

优先选择方法1或方法2：方法1修改成本低，直接针对问题根源处理；方法2更符合Angular的模板驱动理念，减少组件内的状态维护逻辑。

内容的提问来源于stack exchange，提问作者Raz-Dva