title: Set input invalid inside custom form control in Angular 2
body: <p>I have created a custom autocomplete form control, that implements <code>ControlValueAccessor</code> and <code>Validator</code> and integrated it successfully into a reactive form. The input element inside the custom form control uses <code>ngModel</code>.</p>
  
  <p>The value of the form component is valid, if the object returned by it contains a numeric ID.</p>
  
  <p>For example <code>{ id: 1, name: 'Test' }</code> would be a valid object.</p>
  
  <p>Everything is working fine, but unfortunately the input element has the <code>ng-valid</code> CSS class applied to it, since it is not part of the reactive validation process (it uses ngModel).</p>
  
  <p>The input element has my own <code>appInput directive</code> applied to it, so I have access to all form related classes like <code>NgControl</code>, or <code>FormGroupDirective</code>.</p>
  
  <p>This is my custom autocomplete template:</p>
  
  <pre><code>&lt;input
      #searchTerm
      appInput
      type="search"
      [ngModel]="name"
      (ngModelChange)="keyupSubject.next($event)"
  /&gt;
  </code></pre>
  
  <p>and it is inside a <code>reactive formGroup</code>:</p>
  
  <pre><code>&lt;div [formGroup]="parentFormGroup"&gt;
      &lt;div class="col-sm-11"&gt;
  
          &lt;app-autocomplete
              formControlName="name"&gt;
          &lt;/app-autocomplete&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried <code>ngControl</code> and <code>setErrors</code> inside my appInput directive, but the CSS class is still not set.</p>
  
  <pre><code>@Input()
  set errors(errors) {
      const control = this._ngControl;
      control.control.setErrors(errors);
  }
  </code></pre>
  
  <p><strong>How do I set the input element inside my custom form control invalid?</strong>
  I am asking specifically about the CSS class <code>ng-invalid</code> on the input element.</p>