Benutzerdefinierter Async-Validator in reaktiven Formularen Angular 2

Question

Ich versuche, einen Async-Validator in meinen reaktiven Formularen zu implementieren. Aber ich bekomme Fehler, bitte helfen Sie.

Validator

import { AbstractControl } from '@angular/forms'; 
import { Observable } from 'rxjs'; 

export function validate(c: AbstractControl): Observable<{[key : number] : any}>{ 
    console.log(c); 
    // return this.validateAgeObservable(c.value); 
    return this.validateAgeObservable(c.value).first(); 
    } 

    function validateAgeObservable(age: number) { 
    return new Observable(observer => { 
     observer.next(age === 20 ? null : {asyncInvalid: true}); 
     // observer.complete(); or this or .first(); 
    }); 
    } 

Komponente

ngOnInit(){ 
this.user = new FormGroup({ 
     .... 
     age:new FormControl('',null,validate), 
     .... 
} 

ich dieses folgende Fehlermeldung erhalten Bitte helfen

Wenn i Entfernen Sie den Async-Validator funktioniert es gut.

UPDATE

Nach richards Lösung funktioniert es, aber ich will es für Nummernfeld arbeiten, warum seine nicht funktioniert, wenn seine eine Zahl?

und noch eine Sache, die ich beim Laden der Seite bemerkte der Validator heißt dreimal warum ist das so?

Answer 1

habe ich dies funktioniert:

export function validate(c: AbstractControl): Observable<{ [key: string]: any }> { 
    console.log(c); 
    return validateAgeObservable(c.value).first(); 
} 

function validateAgeObservable(age: number): Observable<{ [key: string]: any }> { 
    return new Observable(observer => { 
    observer.next(age === 20 ? null : { 'asyncInvalid': true }); 
    }); 
} 

ich den key Typ string geändert, und ich entfernte die this vom dem des validateAgeObservable Anruf innerhalb der validate Funktion Front.

Es kompiliert und zeigt keine Fehler in der Konsole, so nehme ich an, dass dies funktioniert, wenn gedrückt wird.

Hoffe das hilft dir.