title: Inheriting validation using ControlValueAccessor in Angular
body: <p>I have a custom form control component (it is a glorified input). The reason for it being a custom component is for ease of UI changes - i.e. if we change the way we style our input controls fundamentally it will be easy to propagate change across the whole application.</p>
  
  <p>Currently we are using Material Design in Angular <a href="https://material.angular.io" rel="noreferrer">https://material.angular.io</a></p>
  
  <p>which styles controls very nicely when they are invalid. </p>
  
  <p>We have implemented ControlValueAccessor in order to allow us to pass a formControlName to our custom component, which works perfectly; the form is valid/invalid when the custom control is valid/invalid and the application functions as expected. </p>
  
  <p>However, the issue is that we need to style the UI inside the custom component based on whether it is invalid or not, which we don't seem to be able to do - the input that actually needs to be styled is never validated, it simply passes data to and from the parent component.</p>
  
  <p>COMPONENT.ts</p>
  
  <pre><code>import { Component, forwardRef, Input, OnInit } from '@angular/core';
  import {
      AbstractControl,
      ControlValueAccessor,
      NG_VALIDATORS,
      NG_VALUE_ACCESSOR,
      ValidationErrors,
      Validator,
  } from '@angular/forms';
  
  @Component({
    selector: 'app-input',
    templateUrl: './input.component.html',
    styleUrls: ['./input.component.css'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; InputComponent),
        multi: true
      }
    ]
  })
  export class InputComponent implements OnInit, ControlValueAccessor {
    writeValue(obj: any): void {
      this._value = obj;
    }
    registerOnChange(fn: any): void {
      this.onChanged = fn;
    }
    registerOnTouched(fn: any): void {
      this.onTouched = fn;
    }
    setDisabledState?(isDisabled: boolean): void {
      this.disabled = isDisabled;
    }
  
    get value() {
      return this._value;
    }
  
    set value(value: any) {
      if (this._value !== value) {
        this._value = value;
        this.onChanged(value);
      }
    }
  
    @Input() type: string;
  
    onBlur() {
      this.onTouched();
    }
  
    private onTouched = () =&gt; {};
    private onChanged = (_: any) =&gt; {};
    disabled: boolean;
  
    private _value: any;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>COMPONENT.html</p>
  
  <pre><code>&lt;ng-container [ngSwitch]="type"&gt;
    &lt;md-input-container class="full-width" *ngSwitchCase="'text'"&gt;
      &lt;span mdPrefix&gt;&lt;md-icon&gt;lock_outline&lt;/md-icon&gt; &amp;nbsp; &lt;/span&gt;
      &lt;input mdInput placeholder="Password" type="text" [(ngModel)]="value" (blur)="onBlur()" /&gt;
    &lt;/md-input-container&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>example use on page:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;app-input type="text" formControlName="foo"&gt;&lt;/app-input&gt;
  </code></pre>
  
  <p>TS:    </p>
  
  <pre><code>this.form = this.fb.group({
          foo: [null, Validators.required]
      });
  </code></pre>