自定義驗證器在 Angular 反應形式中不起作用

Question

我正在嘗試創建一個自定義驗證器來檢查電話號碼是否已經存在。 我的代碼如下：

驗證 Function

phoneValidator() {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      if (!control.valueChanges || control.pristine) {
        return of(null);
      } else {
        this.userMgt.phoneExists(control.value).pipe(
          distinctUntilChanged(),
          debounceTime(600))
          .subscribe((res: ApiResponse<any>) => {
            debugger
            if(!res.hasErrors()) {
              if(res.data == true) {
                return { phoneExists: true };
              }
              else {
                return null
              }
            }
        })
      }
    };
  }

來自后端驗證電話號碼的 API：

phoneExists(phoneNo: string): Observable<ApiResponse<user>> {
        return this.clubApiGet(`/profile/isPhoneNumberExists?phoneNo=${phoneNo}`)
    }

我的表單組

private fb: FormBuilder,
defaultUser: User = {
    phoneNo: ""
  };

ngOnInit(): void {
    this.initUserForm();
  }

initUserForm() {
    this.userForm = this.fb.group({
      phone: [
        this.defaultUser.phoneNo,
        Validators.compose([
          Validators.required,
          Validators.minLength(11),
          Validators.maxLength(14),
          this.phoneValidator()
        ]),
      ]
    });
  }

我的 HTML

<div class="form-group row">
  <label class="col-xl-3 col-lg-3 col-form-label">Contact Phone
    <span class="text-danger">*</span>
  </label>
<div class="col-lg-9 col-xl-6">
  <div class="input-group input-group-lg input-group-solid">
     <div class="input-group-prepend">
      <span class="input-group-text">
       <i class="fas fa-phone-alt text-primary"></i>
      </span>
     </div>
     <input
       type="text"
       class="form-control form-control-lg form-control-solid"
       value="+35278953712"
       placeholder="Phone"
       formControlName="phone"
       [ngClass]="{ 'is-in valid': userForm.controls['phone'].invalid&& 
       userForm.controls['phone'].errors}"
      >
</div>
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
    validation: 'required',
    message: 'Phone Number is required',
    control: userForm.controls['phone']
}"></ng-container>

<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
    validation: 'minlength',
    message: 'Phone Number should at least be 11 characters',
    control: userForm.controls['phone']
}"</ng-container>

<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
    validation: 'maxlength',
    message: 'Phone Number cannot exceed 14 characters',
    control: userForm.controls['phone']
}"</ng-container>

// THIS VALIDATION CHECK DOES NOT WORK
<div class="text-danger" *ngIf="userForm.controls['phone']?.errors?.phoneExists">
   This Phone Number is already registered to a user
</div>
</div>
</div>

我無法弄清楚問題發生在哪里。 API 工作正常，但未顯示錯誤消息。 我真的很感激任何幫助。 謝謝你！

Answer 1

• 您已將this.phoneValidator()添加為同步驗證器的一部分。 它應該是異步驗證器的一部分：

phone: [
  this.defaultUser.phoneNo,
  Validators.compose([
    Validators.required,
    Validators.minLength(11),
    Validators.maxLength(14)
  ]),
  [this.phoneValidator()]
]

• 您不需要訂閱，而是從異步驗證器 function 返回一個 Observable：

// else block 
return this.userMgt.phoneExists(control.value).pipe(  // added 'return'
  distinctUntilChanged(),
  debounceTime(600),
  map((res: ApiResponse<any>) => { // using map operator
    debugger
    if (!res.hasErrors()) {
      if (res.data == true) {
        return { phoneExists: true };
      }
      else {
        return null
      }
    }
    return null; // added return statement
  })
);