为什么我的AsyncValidator总是返回true？

Question

为什么这总是返回错误？

export class UserExistsValidatorService implements AsyncValidator {

  constructor(private userService: UserService) { }

  validate(control: FormControl): Observable<ValidationErrors | null> {
    return this.userService.existsUser(control.value)
      .pipe(map(exists => (exists === false) ? null : {
         userExists: { valid: false }
       }),
       catchError(() => of(null)));
   }
}

此验证实现调用返回Observable<boolean>的服务方法

existsUser(username: string): Observable<boolean> {
   return this.http.post<any>(`${environment.apiUrl}/existsUser`, { username })
      .pipe(map(response => response.userExists === '1'))
      .pipe(catchError(this.errorHandler));
}

我已通过订阅并记录该服务以进行快速测试来验证该服务是否正常工作：

this.userService.existsUser(this.registerGrp.controls.username.value)
    .subscribe(exists => { console.log(exists); });

如我所料，这将输出true / false。

但是，我的FormGroup.invalid总是返回false。似乎验证程序总是会触发。

ngOnInit(): void {
    // Formularmodell bauen
    this.registerGrp = this.formBuilder.group({
      username: ['', this.userExistsValidator],
      password: [''],
      // Confirm-Feld müsste eigentlich nicht auf required geprüft werden
      // confirmPassword: [''],
      confirmPassword: [''],
      xboxName: [''],
      discordName: [''],
      accepted: [false]
    });
}

console.log(this.registerGrp.invalid); // always false

有什么想法吗？

Answer 1

Angular并没有解开您的可观察性，它只是在评估整个Observable对象，这始终是事实。

发生这种情况的原因是，您没有告诉Angular那是一个异步验证器。 control signature最多可以接受3个参数：状态，同步验证器列表，异步验证器列表。

在您的情况下，如果没有同步验证器，则可以将control作为第二个参数传递：

null