Reactive Forms Angular中的自定义异步验证器2

Question

我正在尝试在我的Reactive表单中实现异步验证器但是我收到错误请帮助。

验证

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),
      ....
}

我得到以下错误请帮助

如果我删除异步验证器，它可以正常工作。

更新

在richards解决方案之后它可以工作，但我希望它能用于数字字段，为什么它的数字不起作用？

还有一件事，我在页面加载时注意到验证器被称为三次，为什么会这样呢？

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，然后从this函数内的validateAgeObservable调用的前面删除了validate。< / p>

它编译，并且没有在控制台中显示任何错误，因此我假设这在按下时会起作用。

希望这会对你有所帮助。