Angular2 Rückgabedaten von Validierungsdienst nach Http rufen

Question

Ich habe einen Validierungsdienst für mein Anmeldeformular und eine der statischen Methoden bauen wird überprüft, ob die eingegebene E-Mail durch den Aufruf meiner API folgend verfügbar:

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" 
} 

Es sollte "Null" an den Formvalidator zurückgeben, wenn die E-Mail verfügbar ist. Das letzte console.log am unteren Rand sollte die Nachricht ausgeben, die es im Abonnementanruf erhält. Das passiert nicht und ich bin mir nicht sicher warum. Aus irgendeinem Grund ist alles, was innerhalb des Subskriptionsaufrufs passiert, dort enthalten und erreicht niemals den Validator. Was soll ich ändern? Ich habe keine Ahnung und habe jetzt stundenlang im Internet gesucht.

Answer 1

Sie haben Observable oder Promise von Ihrem Validator zurückzukehren:

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

console.log(...) macht keinen Sinn hier machen, da sie ausgeführt wird, nachdem die Observable wird als ein Objekt erstellt wurde, aber nicht nach dem ajax Anruf wurde getätigt.

Wenn Sie ausgeben wollen etwas, nachdem eine Antwort empfangen wurde, müssen Sie es in subscribe

Answer 2

Also am Ende bewegen diese website die richtige Antwort hatte. Außerdem ist es wichtig, dass Sie mit dem Validator Angular2 Form feststellen, dass die Async-Validatoren im dritten (3) Parameter und nicht zusammen in einem Array im zweiten (2) Parameter stehen. Das hat mich ungefähr 3 Stunden gekostet.

Funktion check (Steuerung: 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(); 
       } 
      } 
     ); 
}); 

}

Der Prüfer soll in etwa so aussehen, wobei die ersten Validierer auf erforderliche Überprüfung und wenn es tatsächlich eine E-Mail-Adresse und das letzte Tun ein asynchroner Anruf an den Server, um zu sehen, ob er nicht bereits verwendet wird:

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