使用 Reactive Form 的 Angular 自定义异步验证并在服务方法中等待

Question

我正在尝试在 Angular 中使用 AsyncValidation 和具有异步/等待的服务方法，以测试用户名是否存在。我不知道如何在服务(user.service.ts)中转换返回签名

Promise<boolean> 

e.g. 

async isUserNameAvailable(userName: string): Promise<boolean> {
}

到

Promise<ValidationErrors | null> | Observable<ValidationErrors | null>

e.g.

validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
}

在验证器/指令中。

user.service.ts:

async isUserNameAvailable(userName: string): Promise<boolean> {
    var query = this.db.collection("users").where("name", "==", userName);

    try {
      const documentSnapshot = await query.get();

      if (documentSnapshot.empty) {
        return true;
      } else {
        return false;
      }
    } catch (error) {
      console.log('Error getting documents', error);
    }
  }

existing-username-validator.directive.ts

import { Directive } from '@angular/core';
import { UserService } from './user.service';
import { AbstractControl, ValidationErrors, NG_ASYNC_VALIDATORS, AsyncValidatorFn, AsyncValidator } from '@angular/forms';
import { Observable, timer } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

export function existingUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {

    let debounceTime = 500; //milliseconds
    return Observable.timer(debounceTime).switchMap(()=> { //ERROR BECAUSE OF TIMER
      return userService.isUserNameAvailable(control.value).map( //ERROR BECAUSE OF map
        users => {
          return (users && users.length > 0) ? {"usernameExists": true} : null;
        }
      );
    });
  };
} 

@Directive({
  selector: '[appExistingUsernameValidator]',
  providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: ExistingUsernameValidatorDirective, multi: true}]
})
export class ExistingUsernameValidatorDirective implements AsyncValidator {

  constructor(private userService: UserService) {  }

  validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return existingUsernameValidator(this.userService)(control);  
  }
}

用户.component.ts:

name: new FormControl('', {
      validators: [Validators.required],
      asyncValidators: [existingUsernameValidator(this.userService)]
    }),

堆栈 Blitz :https://stackblitz.com/edit/angular-ivy-cd866c?file=src%2Fapp%2Fuser.service.ts

有谁知道如何使用 Reactive Forms 实现这一点？

Answer 1

刚刚在 Stackblitz 中纠正了 existingUsernameValidator

export function existingUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    let debounceTime = 500; //milliseconds
    const debounceTimer = timer(debounceTime)
    return debounceTimer.pipe(switchMap(()=> {
      return userService.isUserNameAvailable(control.value)
      .then(result => {
          return result ? {"usernameExists": true} : null;
      });
    }));
  };
} 

在 UserService 中更新了 isUserNameAvailable

  async isUserNameAvailable(userName: string): Promise<boolean> {
    const query = this.db.collection("users").where("name", "==", userName);

    return query.get()
    .then(function(documentSnapshot) {
      return (documentSnapshot.empty as boolean) 
    })
    .catch(function(error) {
      console.log("Error getting documents: ", error);
      return false;
    });
  }

尝试一下，如果现在一切就绪，请告诉我。也在 stackblitz 上更新

希望对您有所帮助!

编辑:清理后的代码

验证器函数

export function existingUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    const debounceTime = 500; //milliseconds
    return timer(debounceTime).pipe(switchMap(()=> {
      return userService.isUserNameAvailable(control.value)
      .then(result => result ? {"usernameExists": true} : null);
    }));
  };
} 

用户服务

async isUserNameAvailable(userName: string): Promise<boolean> {
  return this.db.collection("users").where("name", "==", userName).get()
  .then(documentSnapshot => documentSnapshot.empty as boolean)
  .catch(error => {
    console.log("Error getting documents: ", error);
    return false;
  });
}