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

    } 

} 

用戶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

有Validator和AsyncValidators。如果您向服務器發出請求，則應將其設置爲AsyncValidator。要做到這一點，請在第三個參數中的數組中提供驗證器。我

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

同樣在爲EmailValidator構造注意到你設置userServiceProvider作爲爲EmailValidator靜態屬性。我假設你這樣做是因爲userServiceProvider在checkEmailAvail驗證器函數運行時未定義。這是因爲它在調用者的範圍內運行。使userServiceProvider成爲實例屬性（而不是靜態屬性）並像這樣傳遞函數 -

var emailValidator = new EmailValidator(this.userServiceProvider); 

。

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

Answer 2

謝謝Micah。我深入解釋我的問題。其實，有兩個錯誤。

首先我是在第二PARAM代替第三PARAM錯放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') 
}); 

第二個我的驗證應該是承諾，使用解決

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

    }) 
    }) 
} 
}