异步自定义验证器不工作并在 Angular 8 中显示错误消息

Question

我是 Angular 8 的新手，正在尝试创建自定义异步验证器。下面是我的代码：

在我的打字稿文件中，我正在创建如下所示的表单字段。我只使用异步验证器（没有同步验证器，所以将 'null' 作为第二个参数传递）：

group.addControl(control.Name, this.fb.control('', null, this.phoneValidator));

下面是我的异步验证器代码：

phoneValidator(control: AbstractControl) {
    if(control.value == '' || control.value == undefined || control.value == null) {
      return null;
    }
    else {
      return this.phoneValidatorServiceCall(control.value)
        //.pipe(map((data: any) => {
        //  return (data.Response == "True" ? null : { phoneValidator: true });
        //}))
        .subscribe(data => {
            return (data.Response == "True" ? null : { phoneValidator: true });
        })
      }
   }

在上面的代码中，我尝试使用 "Pipe" 只是它不起作用，所以只使用了 "Subscribe" 但即使这样也不起作用。以下是我的服务方式：

phoneValidatorServiceCall(input): Observable<any> {
   return this.http.post<any>('http://xxxxxxxx:xxxx/validate/phone', { 'Text': input });
}

为了在 html 中显示错误，我使用以下代码：

<mat-form-field class="example-full-width">
<input #dyInput [formControlName]="Phone" matInput [placeholder]="Phone" [required]="IsRequiredField">

<!-- For showing validation message(s) (Start) -->
<mat-error *ngFor="let v of Config.Validators">
  {{ f.controls['Phone'].invalid }} // comes true only on error
  {{ f.controls['Phone'].hasError("phoneValidator") }} // always coming false even for wrong input
  <strong *ngIf="f.controls['Phone'].invalid && f.controls['Phone'].hasError('phoneValidator')">
    {{ My Message Here }}
  </strong>
</mat-error>
<!-- For showing validation message(s) (End) -->

我面临两个问题：

它没有在等待服务的响应。不知何故，它总是来自 phoneValidator(control: AbstractControl) 方法 return 的错误
屏幕上未显示错误消息。 f.controls['Phone'].hasError("phoneValidator") 总是出现错误

Answer 1

有几个问题 -

phoneValidator的return类型应该是Promise<ValidationErrors | null> | Observable<ValidationErrors | null>。
做下面类似的事情，这样你 return 一个可观察的并检查你的第二个问题是否得到解决 -

return observableOf({ phoneValidator: true });

使用管道并映射您的响应。

Answer 2

您已获得有关如何解决问题的好建议。那些聚集...所以你目前的问题是：

添加 return 类型的验证器：

Observable<ValidationErrors | null>

因为那是你要去的 return。

所以不要在验证器中订阅，而是 return 可观察的。此外，您需要 return of(null) 有效，因为再次......我们需要 return 一个可观察的。因此，将您的验证器修改为：

import { of } from 'rxjs';

//....

phoneValidator(control: AbstractControl): Observable<ValidationErrors | null> {
  if (!control.value) {
    return of(null);
  } else {
    return this.phoneValidatorServiceCall(control.value)
      .pipe(map((data: any) => {
        return (data.Response == "True" ? null : { phoneValidator: true });
      }))
  }
}

异步自定义验证器不工作并在 Angular 8 中显示错误消息

Async custom validator not working and showing error message in Angular 8

angular

angular-observable

angular8