反应式窗体中的自定义异步验证器Angular 2
问题描述:
我试图在我的反应式窗体中实现异步验证器但是我收到错误请帮忙。反应式窗体中的自定义异步验证器Angular 2
验证
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
后理查兹解决它的工作原理,但我想它的数场工作为什么它不工作的时候它是多少?
还有一件事我发现在页面加载验证器被称为三次这是为什么呢?
答
我得到这个工作:
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
。
它编译,并没有在控制台中显示任何错误,所以我认为这将工作时按下。
希望这可以帮助你。
+0
@Richards,但我需要像年龄这样的数字领域如何使它与数字一起工作。这同样是在模板驱动 – INFOSYS
+0
我想我错了我的假设。 :)当你尝试在数字字段上使用它时,你会得到一个错误吗? –
'ValidationErrors'有一个* string *类型的键,而不是* number *。我不知道改变是否会有所作为,或者不会。 –