为什么我的异步验证器似乎不起作用？-解网

问：

我创建了简单的反应式表单，我想使用异步验证器。为此，我使用了formBuilder的第三个参数。

代码如下：

  ngOnInit() {
    this.form = this.fb.group(
      {
        login: [
          '',
          [Validators.required, this.customValidator],
          [this.asyncValidator()],
        ]
      }],
      }
    );
  }

我的异步验证器函数如下所示：

  asyncValidator(): AsyncValidatorFn {
    console.log('async');
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      console.log('control', control);
      return this.usersService.getUsers().pipe(
        tap(() => console.log('tap')),
        map((users) => {
          console.log(typeof users, users);
          return { usersExists: true }; // i want to launch error
          // return users ? { usersExists: true } : null;
        })
      );
    };
  }

但是，我的异步验证器不起作用，因为在模板中我看到没有键的错误对象。userExists

<pre>{{ form.controls.login.errors | json }}</pre>

请帮我修复我的异步验证器。现在我故意通过以下方式抛出错误：

return { usersExists: true };

这是一个现场演示

角度反应形式

  asyncValidator(): AsyncValidatorFn {
    console.log('async');
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      console.log('control', control);
      return this.usersService.getUsers().pipe(
        tap(() => console.log('tap')),
        map((users) => {
          console.log(typeof users, users);
          return { usersExists: true }; 
        }),
        take(1) // Take ensures completion
      );
    };
  }

上一个：如何使用 PatchValue 编辑嵌套表单数组？

下一个：使用 Angular ng-select，如何在 select 选项中显示 JSON 响应中的 id 和 name？

为什么我的异步验证器似乎不起作用？

Why does my async validator not appear to work?

评论