données Angular2 de retour du service de validation après Http appel

Question

je construire un service de validation pour mon formulaire d'inscription et l'une des méthodes statiques vérifie si l'e-mail entré est disponible en appelant mon API suivantes:

static emailAvailable(control){ 

    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); 
    let http = injector.get(Http); 
    let valid = "E-mail is available"; 

    http.post('https://secretapi.com/email', JSON.stringify({ email: control.value })) 
    .map((res: Response) => res.json()) 
    .subscribe(function(result){ 
     if(result.success){ 
      valid = result.success; //The console.log on the line below is correct, the one at the bottom of the script never changes. 
      console.log(valid); 
      return null; //Doesn't do anything? 
     }else{ 
      valid = result.error; //The console.log on the line below is correct, the one at the bottom of the script never changes. 
      console.log(valid); 
      return { 'invalidEmailAddress': true }; //Doesn't do anything, just like the return above 
     } 
    }); 

    console.log(valid); //Output always "E-mail is available" 
} 

Il devrait retourner "null" au validateur de formulaire quand l'email est disponible. Le dernier fichier console.log en bas devrait afficher le message qu'il reçoit dans l'appel d'abonnement. Cela n'arrive pas et je ne sais pas pourquoi. Pour une raison quelconque, tout ce qui se passe dans l'appel d'abonnement est contenu là et n'atteint jamais le validateur. Que devrais-je changer? Je n'ai aucune idée et j'ai cherché sur le web pendant des heures maintenant.

Answer 1

Vous devez retourner Observable ou Promise de votre validateur:

return http.post('https://secretapi.com/email', ... 

console.log(...) ne fait pas de sens ici, car il sera exécuté après la Observable a été créé comme un objet, mais pas après la ajax appel a été fait.

Si vous voulez quelque chose de sortie après une réponse a été reçue, vous devez le déplacer à l'intérieur subscribe

Answer 2

Donc à la fin de cette website avait la bonne réponse. Il est également important de noter avec le validateur Angular2 Form pour mettre les validateurs Async dans le troisième (3) paramètre et non ensemble dans un tableau dans le second (2) paramètre. Cela m'a pris environ 3 heures pour comprendre.

fonction checkEmail (commande: Control) {

let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); 
let http = injector.get(Http); 

return new Observable((obs: any) => { 
    control 
     .valueChanges 
     .debounceTime(400) 
     .flatMap(value => http.post('https://secretapi.com/email', JSON.stringify({ email: control.value }))) 
     .map((res: Response) => res.json()) 
     .subscribe(
      data => { 
       if(data.success){ 
        obs.next(null); 
        obs.complete(); 
       } else { 
        obs.next({ 'invalidEmailAddress': true }); 
        obs.complete(); 
       } 
      } 
     ); 
}); 

}

Le validateur devrait ressembler à quelque chose comme ça, avec les premiers valideurs vérifier le nécessaire et si elle est en fait une adresse e-mail et le dernier Doing un appel asynchrone au serveur pour voir s'il n'est pas déjà utilisé:

this.registerForm = this.formBuilder.group({ 
     'email': ['', [Validators.required, ValidationService.emailValidator], ValidationService.emailAvailable], 
    });