Angular Firestore Unique name validation (Reactive Forms)

Question

I m new to Angular. I have configured project with FireStore. Everything is working fine. Now I want to register only those users who don't have account with us and give error message to those who are already registered.

Here is register.component.ts

this.form = this.fb.group({
    firstName: new FormControl('',[
      Validators.required,
      Validators.minLength(3)
    ]),
    lastName: new FormControl('',[
      Validators.required,
      Validators.minLength(3)
    ]),
    email: new FormControl('',[
      Validators.required,
      Validators.email,
      CustomValidators.shouldBeUnique(this.afs)
    ])
});

And here is Custom Validator ShouldBeUnique(afs) method.

static shouldBeUnique(afs: AngularFirestore): ValidationErrors | null{
    let emailExists: boolean;
    return (control: AbstractControl) => {
        let emailVal = ''
        let email = control.get('email').value;

        let collref = afs.collection('users').ref;
        let queryref = collref.where('email', '==', email);

        queryref.get().then((snapShot) => {
        if (snapShot.empty) {
            // this.status = 'valid';
            console.log('Email is avalible.');
            return null;
        }
        else {
            console.log('Email is already registered.');
                return { shouldBeUnique: true };
            }
        });
    }
  }

Code is working fine and returning null if email is not in DB. But problem with the code is when email exists in DB it only prints message in console and not returning { shouldBeUnique: true };.
Any sort of help will be appreciated.

@frisinacho I don't know what you have changed in this question but I accepted the approval. Can you please mention the changes? — Musaddiq Khan, Oct 17 '18 at 07:09
Hi @Musaddiq, I just edited the syntax to give a clearer view of the code (colours and highlights) — frisinacho, Oct 17 '18 at 08:16

score 2 · Answer 1 · edited Oct 17 '18 at 06:58

2

Your problem is here:

queryref.get().then((snapShot) => {
    if (snapShot.empty) {
        // this.status = 'valid';
        console.log('Email is avalible.');
        return null;
    }
    else {
        console.log('Email is already registered.');
            return { shouldBeUnique: true };
        }
    });

You are trying to use the return inside the then function but that is a async execution and your code will not wait for that to finish. This is why the console.log is working but the return statement is not.

I suggest you use the async/await approach to reduce complexity and let me know if I can help you any further.

edited Oct 17 '18 at 06:58

frisinacho

160
1
1
11

answered Oct 17 '18 at 06:37

AntonioGarcía

1,140
2
15
25

1

Thanks for the updates. I m trying to use `async await` like below: `await queryref.get().then()` but having no luck. Can you mention where I should use the `await` keyword? Or if you can give me full method with use of await it will great. – Musaddiq Khan Oct 17 '18 at 07:22
I've found a similar case in SO [here](https://stackoverflow.com/a/47408765/8340339). This is a simple use of `await ref.get()`, remember the function containing the `await` call must be anotated as async. – AntonioGarcía Oct 17 '18 at 09:50
I've followed this link but issue is the same. Actually after writing the complete existing email address it only prints in console. But when I press space bar after that it prints in console and also returns the message. – Musaddiq Khan Oct 19 '18 at 05:03

Angular Firestore Unique name validation (Reactive Forms)

1 Answers1