title: How to show the 'has-error' class on an invalid field in Angular 2
body: <p>Given:</p>
  
  <pre><code>&lt;div class="form-group" [fieldValidity]="email"&gt;
    &lt;label for="email" class="sr-only"&gt;Email&lt;/label&gt;
    &lt;input [(ngModel)]="model.email" ngControl="email" required&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my custom [fieldValidity] directive:</p>
  
  <pre><code>import { Directive, ElementRef, Input } from 'angular2/core';
  import {NgControlName} from 'angular2/common';
  @Directive({
    selector: '[fieldValidity]'
  })
  export class FieldValidityDirective {
    private el: HTMLElement;
    @Input('fieldValidity') field: NgControlName;
    constructor(el: ElementRef) { 
      this.el = el.nativeElement;
    }
    private _onValidityChange(value: string) {
      //TODO test field.valid || field.pristine
      if (?) { 
        this.el.classList.remove('has-error');
      } else {
        this.el.classList.add('has-error');
      }
    }
  }
  </code></pre>
  
  <p>How can I get subscribe to the field.valid &amp;&amp; field .pristine values to show the error? (I've marked it with 'TODO' below)</p>