title: Angular 2 reactive forms with async validator trying to add ngClass if validation fails
body: <p>I have a HTML reactive form with async validation. When validation fails I tried to use <code>[class.has-errors]="hasErrors"</code> to add the CSS class has-errors into the  but it doesnt work.</p>
  
  <pre><code>   &lt;form [formGroup]="myForm"&gt;
              &lt;input type="text" formControlName="name"&gt;
              &lt;input type="email" formControlName="email" [class.has-errors]="hasErrors"&gt;
  
              &lt;div *ngIf="myForm.get('email').status === 'PENDING'"&gt;
                  Checking...
              &lt;/div&gt;
              &lt;div *ngIf="myForm.get('email').status === 'VALID'"&gt;
                   Email is available!
              &lt;/div&gt;
  
              &lt;div *ngIf="myForm.get('email').errors &amp;&amp; myForm.get('email').errors.emailTaken"&gt;
                   Oh noes, this email is already taken!
              &lt;/div&gt;
          &lt;/form&gt;  
  </code></pre>
  
  <p>I have an async function</p>
  
  <pre><code>validateEmailNotTaken(control: AbstractControl) {
      return this.signupService.checkEmailNotTaken(control.value).map(res =&gt; {
          console.dir(res);
          this.hasErrors = !res;
          console.log('this.hasErrors=', this.hasErrors);
          return res ? null : { emailTaken: true };
      });
  }
  </code></pre>
  
  <p>and i declared my formbuilder and forms this way</p>
  
  <pre><code>ngOnInit() {
      this.myForm = this.fb.group({
          name: ['', Validators.required],
          email: [
              '',
              [Validators.required, Validators.email],
              this.validateEmailNotTaken.bind(this)
          ]
      });
  }
  </code></pre>
  
  <p>How should I add a class to my input box when my async fails?</p>