非同期カスタム検証（Ionic3）

Question

電子メールの可用性を確認したい、または登録済みの電子メールをもう送信できません。シナリオ：ユーザーが電子メールをフォームに入力した後、電子メールがデータベースに保存されているかどうかを確認した後、システムがエラーをトリガします。私は結果を表示しようとしましたが、 "count> 0"の場合、結果は真であるので、オブジェクト "{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

バリデータと非同期バリデータがあります。サーバーにリクエストする場合は、これをAsyncValidatorにする必要があります。これを行うには、3番目のパラメータの配列でバリデータを提供します。

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

また、私はあなたがEmailValidator上の静的プロパティとしてuserServiceProviderを設定EmailValidatorコンストラクタに気づきました。 checkEmailAvailバリデーター関数が実行されているときにuserServiceProviderが未定義であるため、これを実行していると仮定します。これは、呼び出し元のスコープで実行されているためです。 userServiceProviderを（静的プロパティではなく）インスタンスプロパティにして、thisのように関数を渡します。

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

Answer 2

ありがとうございます。私は自分の問題を深く説明します。実際には2つの間違いがあります。二私のバリデータが約束する必要があります

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

と

を解決使用しています。

私が代わりに第三のparamの第二のparamで間違っプットAsyncValidationた最初の、あなたは私のコードを修正し、これが正しいものです

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

    }) 
    }) 
} 
}