Angular Form 自定義驗證器 http observable 在 http 調用時返回 null

Question

我正在嘗試設置一個表單字段，用於檢查電子郵件是否存在。 我查看了一些示例並且驗證工作正常，但是當我實現 http 管道時，映射到我的服務的 Observable，它拋出它為空？ 我可以假設我從我的服務中錯誤地管道到它，但我不太確定。

有誰能幫助我嗎？

core.js:6014 ERROR TypeError: Cannot read property 'emailService' of undefined

app.component.ts

export class AppComponent implements OnInit {

  signUpForm: FormGroup;

  constructor(private fb: FormBuilder, private emailService: EmailService) { }

  ngOnInit() {
    this.signUpForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required], [this.validateEmailNotTaken]]
    });
  }

  //Validator for checking if email name is taken or not
  validateEmailNotTaken(control: AbstractControl): Observable<{ [key: string]: any } | null> {

      if (control.value === null || control.value.length === 0) {
        return of(null);
      }
      else {
        return timer(1000).pipe(
          switchMap(() => {


            this.emailService.checkEmailExists(control.value).pipe(
              map(res => {
                //Do what with response
                console.log(res);

                if (!res) {
                  return { taken: true };
                }

                return of(null);
              })
            );


          })
        );
      }


  }

}

電子郵件.service.ts

 interface IServerCheckEmailExists {
    "available": boolean;
}
export interface ICheckEmailExists {
    taken: boolean;
}

@Injectable({ providedIn: 'root' })
export class EmailService {

    constructor(private _http: HttpClient) {
    }

    checkEmailExists(email: string): Observable<ICheckEmailExists[]> {

        var postObject = {"action": "checkEmailExists"};
        return this._http.post<IServerCheckEmailExists[]>("myapiurl/" + email, postObject).pipe(
            map(o => o.map((sp): ICheckEmailExists => ({
                taken: sp.available
            })))
        );
    }
}

Answer 1

您的 validateEmailNotTaken 方法沒有獲取組件的實例。 您需要在創建 formGroup 時綁定它。 像這樣修改你的代碼：-

this.signUpForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required], [this.validateEmailNotTaken.bind(this)]]
});

請試試這個，讓我知道。

Answer 2

我在您的代碼中看到的唯一問題是您沒有在this.emailService.checkEmailExists(control.value)內返回對this.emailService.checkEmailExists(control.value)的switchMap ，因為您使用的是{} 。 像這樣的東西：

import { Component, OnInit } from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  Validators,
  AbstractControl
} from "@angular/forms";
import { Observable, of, timer } from "rxjs";
import { switchMap, map } from "rxjs/operators";

import { EmailService } from "./email.service";

@Component({
  selector: "my-app",
  templateUrl: `./app.component.html`,
  styleUrls: [`./app.component.css`]
})
export class AppComponent implements OnInit {
  signUpForm: FormGroup;

  constructor(private fb: FormBuilder, private emailService: EmailService) {}

  ngOnInit() {
    this.signUpForm = this.fb.group({
      name: ["", Validators.required],
      email: ["", [Validators.required], [this.validateEmailNotTaken.bind(this)]]
    });
  }

  //Validator for checking if email name is taken or not
  validateEmailNotTaken(
    control: AbstractControl
  ): Observable<{ [key: string]: any } | null> {
    if (control.value === null || control.value.length === 0) {
      return of(null);
    } else {
      return timer(1000).pipe(
        switchMap(() => {
          // RIGHT HERE 👇🏼
          return this.emailService.checkEmailExists(control.value).pipe(
            map(res => {
              //Do what with response
              console.log(res);
              if (res) {
                return of(null);
              }
              return { taken: true };
            })
          );
        })
      );
    }
  }
}

---

這是您的參考的工作代碼示例。