Angular表单编辑时Async Validator持续处于pending状态问题

编辑预填表单时，email控件的异步验证器始终处于pending状态，核心原因是你的异步验证器仅监听control.valueChanges流，但表单初始化后通过setValue设置初始值时，valueChanges不会触发，导致验证流没有发出任何值，验证流程无法完成。

修改异步验证器，使用startWith(control.value)让流在初始化时立即发出当前控件的值，确保初始预填值能被正常校验：

import { startWith } from 'rxjs';

validateEmail(): AsyncValidatorFn {
  return control => control.valueChanges.pipe(
    startWith(control.value), // 新增：让流先发出当前控件的初始值
    debounceTime(400),
    distinctUntilChanged(),
    switchMap(value => {
      // 处理用户数据未加载完成的边界情况
      if (!this.user) {
        return of(null);
      }
      if (value === this.user.email) {
        return of(null);
      }
      return this.service.checkEmail(value).pipe(
        map(exists => exists ? { exists: true } : null),
        catchError(() => of(null))
      )
    }),
    first()
  );
}

1. 增加!this.user的判断，避免用户数据未加载完成时出现无效校验，直接返回无错误状态，等待数据加载完成后再执行有效校验。
2. 如果担心数据加载的时序问题，可以在设置表单值后手动触发控件验证更新（添加startWith后通常可省略此步骤）：

this.form.setValue({ email: this.user?.email, username: this.user?.username, role: this.user.role.id });
// 手动触发验证更新，不向外发出值变更事件
this.form.get('email')?.updateValueAndValidity({ emitEvent: false });

• .updateValueAndValidity()：默认不会触发valueChanges事件（需手动设置emitEvent: true），且即使触发，也无法从根源解决初始值未进入验证流的问题。
• 手动设置验证器：操作繁琐，且容易错过初始值的校验时机，无法覆盖所有场景。

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