Async Benutzerdefinierte Validierung bei Ionic3

Question

Ich möchte die Verfügbarkeit von E-Mail überprüfen oder die registrierte E-Mail kann nicht mehr eingereicht werden. Das Szenario: Der Benutzer gibt die E-Mail-Adresse in das Formular ein und das System überprüft, ob in der Datenbank die E-Mail bereits gespeichert wurde und das System einen Fehler auslöst. Ich habe versucht, das Ergebnis anzuzeigen, dass, wenn "count> 0" ist, die Ausgabe wahr ist, so dass das Rückgabeobjekt "{is_notavail: true}" zurückgegeben wird. In der Vorlage "is_notavail" wird jedoch immer "false" zurückgegeben. Seltsamerweise ist die Formfarbe rot und ich reiche weder neue noch gespeicherte E-Mails ein. Das sind meine Codes.

email.ts (validator)

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

    } 

} 

benutzer service.ts (service)

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

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

Es gibt Validatoren und AsyncValidatoren. Wenn Sie eine Anfrage an den Server stellen, sollten Sie dies zu einem AsyncValidator machen. Stellen Sie dazu den Validator in einem Array im 3. Parameter bereit.

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

Auch bemerkte ich im EmailValidator Konstruktor Sie die userServiceProvider als statische Eigenschaft auf EmailValidator gesetzt. Ich nehme an, dass Sie dies tun, weil userServiceProvider undefiniert ist, wenn die checkEmailAvail validator-Funktion ausgeführt wird. Dies liegt daran, dass es mit dem Bereich des Aufrufers ausgeführt wird. Machen Sie den userServiceProvider zu einer Instanzeigenschaft (anstelle einer statischen Eigenschaft) und übergeben Sie die Funktion wie folgt:

.

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

Answer 2

Danke Micah. Ich erkläre mein Problem tief. Eigentlich gibt es zwei Fehler.

Die erste war ich falsch Put AsyncValidation in der zweiten param statt dritten param, Sie meinen Code zu beheben, dann ist dies der richtige:

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

Der zweite mein Validator Versprechen sein sollte und verwendet lösen

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

    }) 
    }) 
} 
}