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?

Let me check it up

T. Sunil Rao
– T. Sunil Rao

2020-05-10 10:23:03 +00:00
Commented May 10, 2020 at 10:23 — T. Sunil Rao
– T. Sunil Rao, Commented May 10, 2020 at 10:23
Thanks a lot. I just added a Stackblitz.

CodeAlike
– CodeAlike

2020-05-10 10:29:39 +00:00
Commented May 10, 2020 at 10:29 — CodeAlike
– CodeAlike, Commented May 10, 2020 at 10:29

T. Sunil Rao · Accepted Answer · 2020-05-10 12:01:49Z

4

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

edited May 10, 2020 at 12:01

answered May 10, 2020 at 10:40

T. Sunil Rao

1,2679 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeAlike Over a year ago

Thanks again. It's one step closer. Your solution removed the errors coursed by timer() and map(). However, then causes the following error : "Property 'then' does not exist on type 'boolean'".

T. Sunil Rao Over a year ago

Ok. Checking on it

Lasitha Narangoda · Accepted Answer · 2020-05-10 11:39:38Z

existingUsernameValidator updated as following,

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

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

    return from(userService.isUserNameAvailable(control.value)).pipe(debounceTime(500),
      map(
        users => {
          return users ? {'usernameExists': true} : null;
        }
      )
    );
  };
}

Hope this will help you

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related