Ionic3上的異步自定義驗證

Question

我想查看電子郵件的可用性，或者已注冊的電子郵件無法再提交。 方案：用戶在表單中鍵入電子郵件然后系統檢查數據庫中是否已保存電子郵件，然后系統觸發錯誤。 我試圖顯示結果，如果“count> 0”，則輸出為true，以便返回對象“{is_notavail：true}”。 但是，在模板“is_notavail”中始終返回“false”。 奇怪的是，表單顏色是紅色的我既不提交新的也不保存電子郵件。 這些是我的代碼。

email.ts（驗證器）

import { FormControl } from '@angular/forms';
import { UserServiceProvider } from '../../providers/user-service/user-service';
import 'rxjs/add/operator/toPromise';


export class EmailValidator{
    static userService: UserServiceProvider;
    constructor(userService: UserServiceProvider){
        EmailValidator.userService = userService;
    }
    checkEmailAvail(control: FormControl){
    return EmailValidator.userService.isExist(control.value).toPromise().then(count => {
        if(count>0){
            return {is_notavail: true};
        }else return null;
    });

    }

}

user-service.ts（服務）

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";
import { User } from "../../models/user.model";
import { BehaviorSubject } from "rxjs/BehaviorSubject";


@Injectable()
export class UserServiceProvider {
  users: Observable<User[]>;
  private _users: BehaviorSubject<User[]>;
  private baseUrl: string;
  private dataStore: {
    users: User[]
  };
  constructor(public http: Http) {
    this.baseUrl = 'api/v1/user';
    this.dataStore = {users: []};
    this._users = <BehaviorSubject<User[]>> new BehaviorSubject([]);
    this.users = this._users.asObservable();
  }

  isExist(email: string){  
      return this.http.post(this.baseUrl + '/isexist', {'email': email}).map(data => data.json().data);
  }
}

register.ts（頁）

import { Component } from '@angular/core';
import { NavController, IonicPage, Loading, AlertController, LoadingController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms";
import { UserServiceProvider } from '../../providers/user-service/user-service';
import { User } from "../../models/user.model";
import { PasswordValidator } from '../../validators/password/password';
import { EmailValidator } from "../../validators/email/email";

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})

export class RegisterPage {
  submitAttempt: boolean = false;  
  registerForm: FormGroup;
  control: FormControl;
  _isNotAvail: boolean = false;
  loading: Loading;
  user: User = {name: '', email: '', password: ''};
  constructor(
    public navCtrl: NavController, 
    private formBuilder: FormBuilder, 
    private userServiceProvider: UserServiceProvider,
    private alertCtrl: AlertController,
    private loadingCtrl: LoadingController) {

    this.registerForm = this.formBuilder.group({
      name: ['',  Validators.compose([Validators.required])],
      email: ['', Validators.compose([Validators.required, Validators.email, (new EmailValidator(this.userServiceProvider)).checkEmailAvail])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
      confPassword: ['', Validators.compose([Validators.required])]
    }, {
      validator: PasswordValidator.confPassword('password', 'confPassword')
    });

  }
}

register.html

     <ion-item *ngIf="registerForm.get('email').errors && registerForm.get('email').dirty">
        <p *ngIf="registerForm.get('email').hasError('required')">Email harus diisi.</p>
        <p *ngIf="registerForm.get('email').hasError('email')">Email tidak sesuai format.</p>
        <p *ngIf="registerForm.get('email').hasError('is_notavail')">Email sudah terdaftar.</p>
    </ion-item>

Answer 1

有Validators和AsyncValidators。 如果您向服務器發出請求，則應將其設為AsyncValidator。 為此，請在第3個參數中的數組中提供驗證器。

email: ['', [Validators.required, Validators.email], [new EmailValidator(this.userServiceProvider).checkEmailAvail]],

我還注意到在EmailValidator構造函數中，您將userServiceProvider設置為EmailValidator上的靜態屬性。 我假設您正在執行此操作，因為在checkEmailAvail驗證程序函數運行時未定義userServiceProvider 。 這是因為它與調用者的范圍一起運行。 使userServiceProvider成為一個實例屬性（而不是靜態屬性）並傳遞這樣的函數 -

var emailValidator = new EmailValidator(this.userServiceProvider);

。

email: ['', [Validators.required, Validators.email], [emailValidator.checkEmailAvail.bind(emailValidator)]],

Answer 2

謝謝彌迦。 我深入解釋我的問題。 實際上，有兩個錯誤。

第一個我錯了把AsyncValidation放在第二個參數而不是第三個參數中，你修復了我的代碼，這是正確的：

let emailValidator = new EmailValidator(this.userService);
this.registerForm = this.formBuilder.group({
  name: ['',  Validators.compose([Validators.required])],
  email: ['', Validators.compose([Validators.required, Validators.email]), emailValidator.checkEmailAvail.bind(emailValidator)],
  password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
  confPassword: ['', Validators.compose([Validators.required])]
}, {
  validator: PasswordValidator.confPassword('password', 'confPassword')
});

第二個我的驗證器應該是promise並使用resolve

import { FormControl } from '@angular/forms';
import { UserServiceProvider } from '../../providers/user-service/user-service';

export class EmailValidator{
    static userService: UserServiceProvider;
    constructor(userService: UserServiceProvider){
        EmailValidator.userService = userService;
    }
    checkEmailAvail(control: FormControl){
    return new Promise ( resolve => {
            EmailValidator.userService.isExist(control.value).subscribe(count => {
                if(count>0){                  
                    return resolve({is_notavail: true});
                }else {
                return resolve(null);
                }

    })
    })
}
}