Angular2 şablonu tarafından çalıştırılan async validator

Question

Şablon tarafından yönlendirilen formda asenkron düzeltme aracının tanımlanması ile ilgili bir sorunum var. Bu sınıfa işaret ettiği doğrulayıcı seçicisi asyncEmailValidator ile

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

:

Şu ben bu girişi var beklendiği gibi

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

}

Eposta regex parçası çalışıyor ve regex eşleşiyorsa form başarılı bir şekilde doğrulanıyor. Ancak bundan sonra, e-postanın kullanımda olup olmadığını kontrol etmek istiyorum. Bu yüzden, accountService için bir söz yaratıyorum. Ama bu hiç işe yaramıyor ve form her zaman başarısız durumda.

manken tahrik biçimleri hakkında okumak ve aşağıda FormBuilder kullanarak ettik:

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

zaman uyumsuz doğrulayıcıları Kontrolü (üçüncü parametresinde tanımladığınız

) Ama bu im diffrent yaklaşımı kullanarak, çünkü benim böyle değildir .

Yani, sorum şu: şablonla çalıştırılan formları kullanarak async doğrulayıcı oluşturmak mümkün mü?

Answer 1

Sen NG_ASYNC_VALIDATORS tuşu ile zaman uyumsuz onaylama sağlayıcı kayıt deneyebilirsiniz ve (sadece senkron doğrulayıcıları için) NG_VALIDATORS biri değildir:

@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 web sitesinde bu dokümanı bakınız:

sözdizimi inci beri değişmiş olduğunu belirtmek gerekir

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

Answer 2

tr, şimdi açısal 4 kullanıyorum ve burada bir yeniden yazmanın aşağısındayım: