Validation de formulaire asynchrone Angular avec Firebase

Question

J'essaie d'implémenter un formulaire de validation qui vérifie sur Firebase si un nom d'utilisateur existe. Si ce n'est pas le cas, le formulaire devient invalide.

La validation du formulaire fonctionne correctement lorsque je simule les données à l'aide d'un Observable. Cependant, elle ne fonctionne pas lorsque je récupère les données de Firebase.

Cela fonctionne :

fromMockData(username: string): Observable<Usernames> {
  return username === 'demo' ? Observable.of({ uid: 'test' }) : Observable.of(null);
}

Ce n'est pas le cas de celui-ci :

fromFirebase(username: string): Observable<Usernames> {
  return this.afs.doc(`usernames/${username}`).valueChanges();
}

J'accède aux deux services à partir d'un service de validation :

fromFirebase(input: FormControl): Observable<{[key: string]: any}> {
    return this.service.fromFirebase(input.value).pipe(
      map(user => user ? { invalidUsername: `@${input.value} already exists` } : null),
    );
  }

Une idée de la raison pour laquelle cela ne fonctionne pas lorsque l'on récupère les données de Firebase ?

PS. Je peux voir la valeur correcte lors de l'enregistrement user dans la console - même en utilisant Firebase. Cependant, cela ne renvoie pas la bonne valeur aux propriétés d'erreurs du formulaire (cela ne fonctionne que dans le premier cas : création d'un Observable avec des données fictives).

C'est mon formulaire, btw :

this.form = this.fb.group({
  username: ['', [], [this.validator.fromFirebase.bind(this.validator)]],
});

Démonstration

Answer 1

Comme Firebase renvoie un flux de données, j'ai besoin d'utiliser la méthode premier opérateur afin que seul le premier élément soit émis :

fromFirebase(input: FormControl): Observable<{[key: string]: any}> {
  return this.service.fromFirebase(input.value).pipe(
    first(),
    map(user => user ? { invalidUsername: `@${input.value} already exists` } : null),
  );
}