कोणीय 2 टेम्पलेट संचालित async validator

Question

मुझे टेम्पलेट संचालित फ़ॉर्म में एसिंचस सत्यापनकर्ता को परिभाषित करने में समस्या है।

वर्तमान में मैं इस इनपुट:

<input type="text" ngControl="email" [(ngModel)]="model.applicant.contact.email" #email="ngForm" required asyncEmailValidator> 

सत्यापनकर्ता चयनकर्ता asyncEmailValidator जो इस वर्ग की ओर इशारा करते है साथ:

import {provide} from "angular2/core"; 
import {Directive} from "angular2/core"; 
import {NG_VALIDATORS} from "angular2/common"; 
import {Validator} from "angular2/common"; 
import {Control} from "angular2/common"; 
import {AccountService} from "../services/account.service"; 

@Directive({ 
selector: '[asyncEmailValidator]', 
providers: [provide(NG_VALIDATORS, {useExisting: EmailValidator, multi: true}), AccountService] 
}) 

export class EmailValidator implements Validator { 
//https://angular.io/docs/ts/latest/api/common/Validator-interface.html 


constructor(private accountService:AccountService) { 
} 

validate(c:Control):{[key: string]: any} { 
    let EMAIL_REGEXP = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i; 

    if (!EMAIL_REGEXP.test(c.value)) { 
     return {validateEmail: {valid: false}}; 
    } 

    return null; 

    /*return new Promise(resolve => 
     this.accountService.getUserNames(c.value).subscribe(res => { 
      if (res == true) { 
       resolve(null); 
      } 
      else { 
       resolve({validateEmailTaken: {valid: false}}); 
      } 
     }));*/ 
} 

}

ईमेल regex हिस्सा अपेक्षा के अनुरूप काम कर रहा है और यदि रेगेक्स मेल खाता है तो फ़ॉर्म को सफलतापूर्वक मान्य किया जा रहा है। लेकिन उसके बाद मैं यह जांचना चाहता हूं कि ई-मेल पहले से उपयोग में नहीं है, इसलिए मैं अपने खाते सेवा के लिए वादा कर रहा हूं। लेकिन यह बिल्कुल काम नहीं करता है और फॉर्म हर समय असफल राज्य में है।

मैं मॉडल संचालित रूपों के बारे में पढ़ सकते हैं और नीचे के रूप में FormBuilder का उपयोग कर दिया है:

constructor(builder: FormBuilder) { 
this.email = new Control('', 
    Validators.compose([Validators.required, CustomValidators.emailFormat]), CustomValidators.duplicated 
); 
} 

है कौन सा async प्रमाणकों नियंत्रण (के तीसरे पैरामीटर में परिभाषित) लेकिन यह मेरे मामले क्योंकि im अलग दृष्टिकोण का उपयोग नहीं है ।

तो, मेरा प्रश्न है: क्या टेम्पलेट संचालित रूपों का उपयोग करके एसिंक सत्यापनकर्ता बनाना संभव है?

Answer 1

आप NG_ASYNC_VALIDATORS कुंजी के साथ अपनी async सत्यापनकर्ता के प्रदाता रजिस्टर करने के लिए कोशिश कर सकते हैं और नहीं NG_VALIDATORS एक (केवल तुल्यकालिक प्रमाणकों के लिए):

@Directive({ 
    selector: '[asyncEmailValidator]', 
    providers: [ 
    provide(NG_ASYNC_VALIDATORS, { // <------------ 
     useExisting: EmailValidator, multi: true 
    }), 
    AccountService 
    ] 
}) 
export class EmailValidator implements Validator { 
    constructor(private accountService:AccountService) { 
    } 

    validate(c:Control) { 
    return new Promise(resolve => 
     this.accountService.getUserNames(c.value).subscribe(res => { 
     if (res == true) { 
      resolve(null); 
     } 
     else { 
      resolve({validateEmailTaken: {valid: false}}); 
     } 
    })); 
    } 
} 

angular.io वेबसाइट पर इस डॉक देखें:

• https://angular.io/docs/ts/latest/api/forms/index/NG_ASYNC_VALIDATORS-let.html

Answer 2

ध्यान देने योग्य है कि वाक्य रचना वीं के बाद से बदल गया है एन, अब मैं कोणीय 4 का उपयोग कर रहा हूं, और यहां एक पुनः लिखने के नीचे:

import { Directive, forwardRef } from '@angular/core'; 
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms'; 
import { AccountService } from 'account.service'; 

@Directive({ 
    selector: '[asyncEmailValidator]', 
    providers: [ 
     { 
      provide: NG_ASYNC_VALIDATORS, 
      useExisting: forwardRef(() => EmailValidatorDirective), multi: true 
     }, 
    ] 
}) 
export class EmailValidatorDirective implements Validator { 
    constructor(private _accountService: AccountService) { 
    } 

    validate(c: AbstractControl) { 
     return new Promise(resolve => 
      this._accountService.isEmailExists(c.value).subscribe(res => { 
       if (res == true) { 
        resolve({ validateEmailTaken: { valid: false } }); 
       } 
       else { 
        resolve(null); 
       } 
      })); 
    } 
}