Corner 5 | Check if a field exists in Cloud Firestore

Question

Corner 5 | Check if a field exists in Cloud Firestore

I am currently working on a large project, and for this I need to work with Firebase and Angular 5, but I am blocking form validation a bit.

I would like to create my own validator to check if the email address already entered by the user is used.

To do this, I put the function in custom validators, an error appears when the email is already in use, but the problem is that we enter an unused address.

When I check the form with the address already in use, the form returns me the status "INVALID", which is quite normal, and this is what I am looking for, but when I check by email, which is not in Firestore, it returns an error telling me that the form is in the status "WAITING", that is, she is waiting ... But what to expect?

What am I doing

I create my formControl in my template

// inscription.component.html
<mat-step [stepControl]="form">
  <form [formGroup]="form">
    <mat-form-field>
       <input matInput formControlName="email" 
       placeholder="Ton adresse email" required>
       <mat-error *ngIf="email.invalid">
         {{ getErrorMessage(email, 'adresse email', 3, 25) }}
       </mat-error>
    </mat-form-field>
  </form>
</mat-step>

My getErrorMessage () function

// inscription.component.html
getErrorMessage(selector: any, element: string, minCharacters: number, maxCharacters: number) {
     return selector.hasError('required') ? 'Tu dois entrer ton ' + element :
            selector.hasError('notunique') ? 'Cette ' + element + ' est déjà utilisée' :
            '';
}

I initialize everything I need to create the form:

// inscription.component.ts
form: FormGroup;
email = new FormControl('', [
   Validators.required,
   Validators.email,
   Validators.minLength(3),
   Validators.maxLength(25)
   // Fonction pour la vérif de l'email
], this.checkIfEmailExistsInDatabase.bind(this));

Then I initialize the email management form in my form

// inscription.component.ts
ngOnInit() {
   this.form = new FormGroup({
      email: this.email,
   });
}

And finally ... where did the "error" come from:

// inscription.component.ts
    checkIfEmailExistsInDatabase(control: AbstractControl) {
        return new Promise(resolve => {
            // We check that there is no document with the same name of what is in the formControl
            firebase.firestore().collection('items').where('email', '==', control.value).get()
                .then(snapshot => {
                    snapshot.forEach(doc => {
                        if (!doc.exists) {
                            console.log('Email doesn\'t exists');
                            resolve(null);
                            // ERROR: Validation status remains in "PENDING"                                // While he must normally proceed to the next step
                        } else {
                            console.log('Email exists already');
                            resolve({ 'notunique' : true });
                            // An error message is displayed well and blocks validation                            }
                    })
                });
        });
    }