反應式窗體中的自定義異步驗證器Angular 2

Question

我試圖在我的反應式窗體中實現異步驗證器但是我收到錯誤請幫忙。

驗證

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

組件

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

我得到這個錯誤之後，請幫忙

如果我刪除它的工作正常的異步驗證程序。

UPDATE

後理查茲解決它的工作原理，但我想它的數場工作爲什麼它不工作的時候它是多少？

還有一件事我發現在頁面加載驗證器被稱爲三次這是爲什麼呢？

Answer 1

我得到這個工作：

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

我改變了key類型string，和我刪除從前面validate函數內部validateAgeObservable呼叫的this。

它編譯，並沒有在控制檯中顯示任何錯誤，所以我認爲這將工作時按下。

希望這可以幫助你。