Angular自定义异步验证器保持待定状态

Question

我有一个自定义验证器，用于验证用户电子邮件是否唯一。

我已经搜索了关于stackoverflow和Internet的相关主题，但是没有帮助

当我以表单形式发送输入（发送请求）时，请求将保持待处理状态，并且无法解析。

我已经在邮递员中测试了后端，它的工作正常，问题出在客户端或角度。

验证功能如下：

emailUniqueValidator (control: AbstractControl): Promise<{[key: string]: any}> | Observable<{[key: string]: any}> {
    return new Promise((resolve, reject) => {
      this.userService.checkEmailUnique(control.value).subscribe((response: Response) => {
        const body = response.json();
        if (body.found === false) {
          resolve(null); // email is unique
        } else {
          reject({emailUniqueValidator: true}); // email is not unique
        }
      });
    });
  }

当我更改窗体控件的值时，将显示挂起的类，但它永远存在，而不是被解析。

我有如下电子邮件表单控件：

'email': new FormControl('', [
        Validators.required,
        Validators.email
      ], this.emailUniqueValidator.bind(this)
),

我的用户服务如下：

checkEmailUnique (email: string): Observable<Response> {
    return this.http.post('http://localhost:3000/user/email', {email}, { withCredentials: true });
  }

为什么验证器无法及时解决并永远待命？

编辑：

以下代码可以很好地从服务中获取价值，我已经通过将响应记录到控制台中进行了检查。

如果数据库中不存在该电子邮件，则可以很好地解决，但是如果该电子邮件已经存在，则抛出错误，并且状态仍为未决。

return new Promise((resolve, reject) => {
      this.userService.checkEmailUnique(control.value).subscribe((response: Response) => {
        console.log(response);
        response.json().found ? reject({emailUniqueValidator: true}) : resolve(null);
      }, (error: any) => reject({emailUniqueValidator: true}));
});

Answer 1

可观察的对象永远不会完成。

尝试在末尾添加.first() 。

emailUniqueValidator (control: AbstractControl): Observable<{[key: string]: any}> {
    return this.userService.checkEmailUnique(control.value)
               .map(r => r.json())
               .map(r => (r.found) ? {emailUniqueValidator: true} : null)
               .first();
 }

Answer 2

我有同样的问题。 我删除了changeDetection: ChangeDetectionStrategy.OnPush并成功了。 这里有一个例子。

Answer 3

确保您的“状态代码来自”服务为200

var user = _appRepository.GetUserByUserName(username);
if (user != null)

    return Ok(user );
}
return Ok();

这是来自asp.net核心api。 当用户不可用时，发送空的Ok() 。 如果角度捕获404或400，则始终显示未决。

export function uniqueUsernameValidator(userService: UserService): AsyncValidatorFn {
  return (c: AbstractControl): Observable<{ [key: string]: any } | null> => {
    return userService.getUserByUsername(c.value).pipe(
      map(users => {
        console.log(users)
        if (users) {
          return { 'unique': true};
        }else {
          return null
        }
      })
    )
  };
}

Answer 4

您为什么要履行承诺，却会产生明显的头痛？ 尝试这样：

emailUniqueValidator (control: AbstractControl): Observable<{[key: string]: any}> {
    return this.userService.checkEmailUnique(control.value)
               .map(r => r.json())
               .map(r => (r.found) ? {emailUniqueValidator: true} : null);
 }