未调用表单组异步验证器函数

Question

我需要实现依赖于多个表单字段的异步验证，所以我将验证放在 FormGroup 上。但是验证函数没有被调用。肯定是漏了什么。

heroForm: FormGroup;

  ngOnInit(): void {
    this.heroForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
      'alterEgo': new FormControl(this.hero.alterEgo, {        
        updateOn: 'blur'
      }),
      'power': new FormControl(this.hero.power, Validators.required)
    }, null,this.validate.bind(this));
  }

  validate(
    ctrl: FormGroup
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    console.log(ctrl)
    return this.heroesService.isAlterEgoTaken(ctrl.controls.alterEgo.value).pipe(
      map(isTaken => { 
        console.log(isTaken);
        return (isTaken ? { uniqueAlterEgo: true } : null)
        }),
      catchError(() => null)
    );
  }

在此处创建了一个演示：https://stackblitz.com/edit/angular-xtqhqi

Answer 1

仅当所有同步验证器 return 为空时才会触发异步验证器。所以删除所有表单错误，然后异步验证器将被调用。

不要忘记您为该输入指定了 updateOn: 'blur'，因此您必须模糊输入以触发验证。

未调用表单组异步验证器函数

Form group async validator function not getting called

angular

angular-forms

angular-validation