反应式窗体中的自定义异步验证器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。

它编译，并没有在控制台中显示任何错误，所以我认为这将工作时按下。

希望这可以帮助你。