Angular中如何等待http请求响应后返回自定义表单验证器

问题根因 #

你当前的写法混淆了同步、异步逻辑的执行顺序：HTTP请求是异步操作，发起后不会阻塞后续代码执行，return validators 执行时服务端还没返回结果，所以拿到的始终是空数组。JavaScript是单线程事件循环模型，没有「暂停线程等待异步返回」的用法，直接用Angular原生支持的异步验证器能力改造即可。

改造方案 #

第一步：修正ValidatorsService的实现

首先修正你代码里的拼写错误（suscribe改为subscribe），同时将方法改为返回异步验证器函数，还可以增加缓存逻辑避免每次校验都重复发请求：

import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

// ... 其他服务逻辑
private rangeConfigCache$: Observable<Range> | null = null;

public getMaxRangeValidator(): ValidatorFn {
  // 缓存请求结果，避免重复发起请求
  if (!this.rangeConfigCache$) {
    this.rangeConfigCache$ = this.httpClient.get<Range>(this.url).pipe(
      shareReplay(1) // 缓存1份结果，所有订阅者共用同一份请求结果
    );
  }

  // 返回异步验证器函数
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.rangeConfigCache$.pipe(
      map(config => {
        const maxLengthValid = Validators.maxLength(config.maxLength)(control);
        return maxLengthValid ? maxLengthValid : null;
      })
    );
  };
}

第二步：调整表单初始化逻辑

Angular的FormControl参数结构为 [初始值, 同步验证器数组, 异步验证器数组]，异步验证器需要放在第三个参数位：

constructor(private formBuilder: FormBuilder, private validators: ValidatorsService) 
{
  this.form = this.formBuilder.group({
    max_range: [null, [], [this.validators.getMaxRangeValidator()]]
  })
}

可选优化 #

如果你希望拿到所有校验规则后再初始化表单，避免表单存在pending状态，也可以把请求逻辑提前到表单初始化之前：

ngOnInit() {
  this.validators.getRangeConfig().subscribe(config => {
    this.form = this.formBuilder.group({
      max_range: [null, [Validators.maxLength(config.maxLength)]]
    })
  })
}

配套在服务里新增获取配置的方法即可。

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