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

我面临两个问题：

它不是在等待服务响应。总是以某种方式从phoneValidator（control：AbstractControl）方法返回错误
错误消息未显示在屏幕上。 f.controls ['Phone']。hasError（“ phoneValidator”）始终为假

Answer 1

您已获得解决问题的好技巧。那些人聚集在一起...所以您当前的问题是：

添加验证器的返回类型：

Observable<ValidationErrors | null>

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

因此，不要订阅验证器，而是返回可观察对象。另外，您需要return of(null)有效，因为再次……我们需要返回一个可观察值。因此，将验证器修改为：

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

Answer 2

有几个问题-

phoneValidator的返回类型应为Promise<ValidationErrors | null> | Observable<ValidationErrors | null>。
执行以下操作，以便返回可观察的结果，并检查第二个问题是否得到解决-

return observableOf（{phoneValidator：true}）;

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

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

2 个答案: