title: Angular 2 async custom validator
body: <p>I'm trying to implement async custom validation and i have the validation class as below</p>
  
  <pre><code>export class CustomValidators{
  _auth_service;
  constructor(auth_service:AuthService){
      this._auth_service = auth_service;
  }
  
  usernameTaken(control: Control) {
      console.log(this._auth_service);
      let q = new Promise&lt;ValidationResult&gt;((resolve, reject) =&gt; {
      this._auth_service.emailtaken('email='+control.value).subscribe(data=&gt;{
              var result = data.json().result;
              console.log(result);
              if(result===true){
                  resolve({"usernameTaken": data});
              }else{
                  resolve(null);
              }
          });
  });
  return q;
  }
  
  }
  </code></pre>
  
  <p>And in my component </p>
  
  <pre><code>this.customValidators = new CustomValidators(this._auth_service);
  </code></pre>
  
  <p>The i add it to form control like so</p>
  
  <pre><code>this.emailControl = new Control('',Validators.compose([Validators.required, Validators.pattern(ConfigService.EMAIL_REGEX)]),this.customValidators.usernameTaken); 
  </code></pre>
  
  <p>You can see that i am trying to inject a service in my validator. And then to use the validator function in my component i had to create an object of the validator and use it's method. I have debugged to see that the <code>this._auth_service</code> property appear <code>undefined</code> in my validator method. It seems to be populated fine in my validator constructor.</p>
  
  <p>I do not want to use the validator as directive which i understand makes injecting service easy.  </p>
  
  <p>What could be the problem?</p>