Angular Custom Async Validation using Reactive Form and await in service method

Question

I'm trying to use AsyncValidation in Angular with a service method that has async/await, to test if a userName exists. I can't figure out how to convert the return signature in the service (user.service.ts)

Promise<boolean> 

e.g. 

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

to

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

e.g.

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

in the Validator/Directive.

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);  
  }
}

user.component.ts:

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

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

Does anyone know how to achieve this using Reactive Forms?

T. Sunil Rao T. Sunil Rao · Accepted Answer · 2020-05-10T10:40:56

Just rectified the existingUsernameValidator in the Stackblitz

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;
      });
    }));
  };
}

Updated isUserNameAvailable in UserService

  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;
    });
  }

Try it and let me know if all set now. Also updated on stackblitz

Hope it helps!

EDIT: Code after cleanup

Vaidator Function

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);
    }));
  };
}

UserService

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;
  });
}

Angular Custom Async Validation using Reactive Form and await in service method

2 Answers