Angular 13中如何实现带异步逻辑的指令按顺序执行

异步校验器执行时，表单控件会进入PENDING状态，原ValidityStyleDirective仅在blur事件触发时读取校验状态，此时带500ms延迟的邮箱存在性校验还未执行完成，读取到的valid/errors是旧值，自然会出现样式和校验结果不同步的问题。另外原指令硬编码了email控件名，也不符合复用要求。

核心思路是跳过控件的PENDING阶段，等异步校验完成、状态变更为VALID/INVALID后再执行样式更新逻辑，不需要修改已有的异步校验指令，只需要调整ValidityStyleDirective的实现即可。

修改后的完整指令代码如下：

import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer2, Self } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Directive({
  selector: '[validityStyle]'
})
export class ValidityStyleDirective implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    @Self() private ngControl: NgControl,
    private renderer: Renderer2,
    private el: ElementRef
  ) { }

  ngOnInit() {
    // 监听控件状态变化，异步校验完成后自动更新样式
    this.ngControl.statusChanges
      ?.pipe(takeUntil(this.destroy$))
      .subscribe(status => {
        // 仅在输入框失焦过、且校验完成（非PENDING状态）时更新样式
        if (this.el.nativeElement.dataset.touched === 'true' && status !== 'PENDING') {
          this.updateControlStyle();
        }
      });
  }

  @HostListener('blur')
  onBlur() {
    // 标记输入框已被用户操作过，避免未访问就显示错误样式
    this.renderer.setAttribute(this.el.nativeElement, 'data-touched', 'true');
    
    // 非pending状态直接更新样式，pending状态等待statusChanges回调触发即可
    if (this.ngControl.status !== 'PENDING') {
      this.updateControlStyle();
    }
  }

  private updateControlStyle() {
    const control = this.ngControl.control;
    if (!control) return;

    // 空值时移除错误样式
    if (!control.value) {
      this.renderer.removeClass(this.el.nativeElement, 'is-invalid');
      return;
    }

    // 根据最终校验结果切换样式
    control.invalid 
      ? this.renderer.addClass(this.el.nativeElement, 'is-invalid')
      : this.renderer.removeClass(this.el.nativeElement, 'is-invalid');
  }

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

• 移除了原代码中硬编码获取email控件、手动调用setErrors(null)的冗余逻辑：Angular会在异步校验完成后自动更新控件错误状态，手动修改反而可能覆盖异步校验返回的userExists错误，同时去掉硬编码后指令可以复用到任意表单输入框。
• 新增状态订阅逻辑：通过statusChanges监听控件状态变化，自动跳过PENDING阶段，等异步校验完成后再执行样式更新，从根本上避免执行顺序问题。
• 增加失焦标记：只有用户触发过失焦的输入框才会应用错误样式，和原生表单的交互逻辑保持一致。
• 增加内存泄漏处理：组件销毁时自动取消订阅，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Samantha Létourneau