为什么我的 AsyncValidator 总是 return 为真？

Question

为什么这总是 return 错误？

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)));
   }
}

此验证实现调用一个服务方法，该方法 return 是一个 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 总是 return 错误。似乎验证器总是触发。

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 个参数：状态、同步验证器列表、异步验证器列表。

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

username: ['', null, this.userExistsValidator],

为什么我的 AsyncValidator 总是 return 为真？

Why does my AsyncValidator always return true?

angular

customvalidator