Angular async validator using firestore

Question

I want to make a custom async validator in my Angular project.

I'm using firestore for my DB, and the structure of it is

colloection (profiles) - doc ( email, username )

this is my form code,

   this.registerForm = this.formBuilder.group({
      email : ['', Validators.compose([Validators.required, Validators.email]), this.emailCheck.bind(this) ],
      password : ['', Validators.required],
      confirmPassword : ['', Validators.compose([Validators.required, this.isEqualPassword.bind(this)])]
  })

but i don't know how to make this.emailCheck.bind(this) function.

what I did is

emailCheck(control: FormControl)  {
  control.valueChanges
      .debounceTime(1500)
      .switchMap(val => this.emailValid(val))
      .subscribe((res) => {
        return res ? null : {emailAvailable : true}
      })



 emailValid(val) : Observable<any> {
  let ref = this.afs.collection(`profiles`, ref => ref.where('email', '==', val))
  return ref.valueChanges()

and then I get error

please let me know how to fix this.

https://stackoverflow.com/questions/35521583/how-to-implement-custom-async-validator-in-angular2-4-5 — R. Richards, Jan 24 '18 at 05:52

score 1 · Accepted Answer · answered Jan 24 '18 at 06:56

Check official documenation on how to create custom validation on angular

Basically what you have to do is create a function that returns a Promise or Observable with the errors or null.

emailCheck(control: FormControl): Observable<{[key: string]: any}>  {
  return control.valueChanges
      .debounceTime(1500)
      .switchMap(val => this.emailValid(val))
      .map(res => res ? null : {emailAvailable : true})

Angular async validator using firestore

1 Answers1