去抖动异步验证器

Question

我有一个工作异步验证器，它向服务器发出 HTTP 请求以检查用户名是否已被占用。因为我不想在每次击键后调用 API，所以我需要对输入流进行去抖动。

我第一次参加throttleTime了这项服务，但是关于 SO 的另一个主题说这必须是订阅者，但还没有运气！

我的组件：

this.form = this._fb.group(
      {
        username: ['', [Validators.required, Validators.maxLength(50), NoWhitespaceValidator], [IsUserIdFreeValidator.createValidator(this._managementService)]]
      });

我的验证器：

export class IsUserIdFreeValidator {
  static createValidator(_managementService: ManagementService) {
    return (control: AbstractControl) => {
      return _managementService.isUserIdFree(control.value)
        .pipe(
          throttleTime(5000),
          (map(
            (result: boolean) => result === false ? { isUserIdFree: true } : null))
        );
    };
  }
}

我的服务：

  public isUserIdFree(userId: string): Observable<{} | boolean | HttpError> {
    const updateUserCheck: UpdateUserCheck = new UpdateUserCheck();
    updateUserCheck.userID = userId;

    return this._httpClient.post<boolean>('UserManagementUser/IsUserIdFree', updateUserCheck));
  }

Answer 1

我能够通过另一种方式解决这个问题，通过控件上名为“ updateOn ”的属性。

使用模板驱动的表单：

<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

对于反应形式：

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

如果你使用表单构建器，从 Angular 7 开始你可以使用这个：

this.form = this._fb.group({
  email: ['', [CustomValidators.email], null, 'blur'],
});