首页 文章

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

提问于
浏览 次
0

我试图在我的Reactive表单中实现异步验证器但是我收到错误请帮忙 .

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

Component

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

我得到以下错误请帮忙

enter image description here

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

UPDATE

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

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

angular angular-cli angular-reactive-forms

1 回答

  • 0

    我得到了这个工作：

    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 .

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

    希望这对你有所帮助 .

    回复于

相关问题