Problème avec la fonction de validation ne définissant pas un objet d'erreur sur le contrôle de formulaire

Question

J'ai un problème avec la fonction de validation suivante :

export function validateEmailKnownFactory(userAccountService: UserAccountService): {[key: string]: any} {
  return (control: AbstractControl) => {
    return control
      .valueChanges
      .debounceTime(1000)
      .switchMap(value => userAccountService.checkAvailability(value))
      .map(res => {
        if (res.json() === false) {
          return null;
        }
        // Le flux de contrôle passe par ici
        return {emailKnownValidator: {unknown: true}};
      });
  };
}

Il ne définit pas l'objet d'erreur (c'est-à-dire {emailKnownValidator: {unknown: true}}) sur le contrôle de formulaire mais le flux de contrôle passe effectivement au bon endroit.

Maintenant, si je remplace la fonction ci-dessus par la suivante :

export function validateEmailKnownFactory(userAccountService: UserAccountService): {[key: string]: any} {
  return (control: AbstractControl) => {
    return userAccountService.checkAvailability(control.value)
      .map(res => {
        if (res.json() === false) {
          return null;
        }
        return {emailKnownValidator: {unknown: true}};
      });
  };
}

l'objet d'erreur est correctement défini sur le contrôle de formulaire et l'application se comporte comme prévu.

Remarquez la différence : je reçois l' Observable de control.valueChanges et j'appelle debounceTime dessus, tandis que l'autre fonction appelle simplement checkAvailability directement.

Pour plus de clarté, voici la méthode checkAvailability :

  checkAvailability(email: string) {
    let body = 'email=' + email;
    return this.http.get(this.urls.USER_ACCOUNT.EMAIL_AVAILABLE + body);
  }

Answer 1

Les fonctions de validation asynchrones dans Angular 2 peuvent renvoyer soit une Promise soit un Observable. Si un Observable est renvoyé, il doit se terminer - car Angular convertit l'Observable en une Promise. C'est-à-dire que l'Observable est utilisé pour que la validation puisse être asynchrone - pas pour que le validateur puisse fournir un flux de résultats.

L'Observable composé à partir de valueChanges dans votre premier validateur ne se termine pas - car valueChanges continue à générer des changements. Cela signifie que la Promise ne se résout pas et qu'il n'y a aucun résultat de validation qui peut être appliqué au contrôle. (Notez qu'Angular va appeler votre fonction de validation pour chaque changement de la valeur du contrôle et chaque appel verra un Observable composé et abonné, donc checkAvailability sera appelé pour chaque changement. L'opérateur debounceTime n'aura pas l'effet sur le comportement que vous semblez vouloir.)

L'Observable renvoyé par la fonction checkAvailability se termine, donc votre deuxième fonction de validation fonctionne.