validation - Angular2 template driven async validator -

i have problem defining asynchrous validator in template driven form.

currently have input:

<input type="text" ngcontrol="email"  [(ngmodel)]="model.applicant.contact.email" #email="ngform" required asyncemailvalidator> 

with validator selector asyncemailvalidator pointing class:

import {provide} "angular2/core"; import {directive} "angular2/core"; import {ng_validators} "angular2/common"; import {validator} "angular2/common"; import {control} "angular2/common"; import {accountservice} "../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}});             }         }));*/ } 

}

email regex part working expected , form being validated successfuly if regex matching. after want check if e-mail not in use, im creating promise accountservice. doesn't work @ , form in failed state time.

i've read model driven forms , using formbuilder below:

constructor(builder: formbuilder) { this.email = new control('',   validators.compose([validators.required, customvalidators.emailformat]), customvalidators.duplicated ); } 

which have async validators defined in third parameter of control() not case because im using diffrent approach.

so, question is: possible create async validator using template driven forms?

you try register provider of async validator ng_async_validators key , not ng_validators 1 (only synchronous 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}});         }     }));   } } 

see doc on angular.io website:

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