Ausgabe mit Prüffunktion auf Formularsteuerung nicht Einstellung Fehlerobjekt

Question

Ich habe ein Problem mit der folgenden Prüffunktion:

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; 
     } 
     //Control flow does get through here 
     return {emailKnownValidator: {unknown: true}}; 
     }); 
    }; 
} 

Es ist nicht das Fehlerobjekt Einstellung (dh {emailKnownValidator: {unknown: true}}) auf dem Formular Kontrolle, aber der Steuerfluss kommt durch den richtigen Ort.

Nun, wenn ich ersetzen die obige Funktion mit dem folgenden:

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}}; 
     }); 
    }; 
} 

das Fehlerobjekt wird fein auf dem Formular Kontrolle und die Anwendung verhält sich wie erwartet.

Beachten Sie den Unterschied: Ich erhalte die Observable von control.valueChanges und ich rufe debounceTime auf sie, während die andere Funktion direkt nur checkAvailability nennen.

Der Vollständigkeit halber ist hier die checkAvailability Methode:

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

Answer 1

Asynchronous Validator Funktionen in Angular 2 zurückkehren kann entweder eine Promise oder eine Observable. Wenn ein Observable zurückgegeben wird, muss es abgeschlossen werden - als Angular converts the Observable to a Promise. Das heißt, die Observable wird verwendet, so dass die Validierung asynchron sein kann - nicht so, dass der Validator einen Strom von Ergebnissen liefern kann.

Die Observable bestehend aus valueChanges in Ihrem ersten Validator nicht abgeschlossen - wie valueChanges pumpt ständig Änderungen aus. Das bedeutet, dass Promise nicht aufgelöst wird und es kein Validierungsergebnis gibt, das auf das Steuerelement angewendet werden kann. (Beachten Sie, dass Angular Ihre Validierungsfunktion für jede Änderung des Werts des Steuerelements aufruft und dass für jeden Aufruf ein Observable Composer und Subskribiert wird, sodass checkAvailability für jede Änderung aufgerufen wird. Der Operator debounceTime wird das Verhalten nicht beeinflussen Sie scheinen zu wollen.)

Die Observable zurückgegeben von der checkAvailability Funktion ist abgeschlossen, so dass Ihre zweite Validator-Funktion funktioniert.