异步自定义验证器不起作用并在 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 });
        })
      }
   }

在上面的代码中，我尝试使用“管道”，但它不起作用，所以只使用了“订阅”，但即使这样也不起作用。下面是我的服务方式：

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

我面临两个问题：

1. 它不等待服务的响应。不知何故，它总是从 phoneValidator(control: AbstractControl) 方法返回错误
2. 错误消息未显示在屏幕上。 f.controls['Phone'].hasError("phoneValidator") 总是假的

Answer 1

有几个问题-

1. phoneValidator 的返回类型应该是Promise<ValidationErrors | null> | Observable<ValidationErrors | null>。
2. 执行以下操作，以便返回一个 observable 并检查您的第二个问题是否得到解决 -

return observableOf({ phoneValidator: true });

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

Answer 2

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

添加验证器的返回类型：

Observable<ValidationErrors | null>

因为那是你要返回的东西。

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

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