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

仅当所有同步验证器返回null时，才会触发异步验证器。因此，删除所有格式错误，然后将调用异步验证器。

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

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

1 个答案: