Angular2 响应式表单异步验证

参考资料
https://angular.cn/guide/form-validation#async-validation

建立表单模型

this.heroForm = new FormGroup({
     'name': new FormControl(this.hero.name, [
       Validators.required,
       Validators.minLength(4),
       forbiddenNameValidator(/bob/i)
     ]),
     'alterEgo': new FormControl(this.hero.alterEgo, {
       asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)], // 加入异步验证器
       updateOn: 'blur'
     }),
     'power': new FormControl(this.hero.power, Validators.required)
   })

验证器实现

@Injectable({ providedIn: 'root' })
export class UniqueAlterEgoValidator implements AsyncValidator {
  constructor(private heroesService: HeroesService) {}

  validate(
    ctrl: AbstractControl
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return this.heroesService.isAlterEgoTaken(ctrl.value).pipe(
      map(isTaken => (isTaken ? { uniqueAlterEgo: true } : null)),
      catchError(() => null)
    );
  }
}

const ALTER_EGOS = ['Eric'];

@Injectable({ providedIn: 'root' })
export class HeroesService {
  isAlterEgoTaken(alterEgo: string): Observable<boolean> {
    const isTaken = ALTER_EGOS.includes(alterEgo);   // http请求成功后返回
    return of(isTaken).pipe(delay(400));
  }
}

页面提示

  <div class="form-group">
          <label for="alterEgo">Alter Ego</label>
          <input id="alterEgo" class="form-control"
              formControlName="alterEgo"  >
          <div *ngIf="alterEgo.pending">Validating...</div>
          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
            <div *ngIf="alterEgo.errors?.uniqueAlterEgo">
              Alter ego is already taken.
            </div>
          </div>
  </div>

性能优化

如果每次按键都触发请求会给后端 API 带来沉重的负担，应该避免，优化如下：

new FormControl('', {updateOn: 'blur'});