Validation asynchrone des formulaires Angular en utilisant Firebase

Question

Je tente de mettre en place une validation de formulaire qui vérifie sur Firebase si un nom d'utilisateur existe. S'il n'existe pas, le formulaire devient invalide.

La validation du formulaire fonctionne bien lorsque je simule les données en utilisant un Observable. Cependant, cela ne fonctionne pas lorsque je récupère les données depuis Firebase.

Ceci fonctionne :

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

Celui-ci ne fonctionne pas :

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

J'accède aux deux services depuis un service de validation :

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

Des idées sur pourquoi cela ne fonctionne pas lors de la récupération des données depuis Firebase ?

PS. Je peux voir la valeur correcte en journalisant user dans la console - même en utilisant Firebase. Cependant, il ne renvoie pas la valeur appropriée aux propriétés d'erreurs du formulaire (cela fonctionne uniquement dans le premier cas : en créant un Observable avec des données simulées).

Voici mon formulaire, au fait :

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

Démo

Answer 1

Parce que Firebase renvoie un flux de données, j'ai besoin d'utiliser l' opérateur first 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} existe déjà` } : null),
  );
}