title: How do I get reference to the FormControl from a component that implements ControlValueAccessor?
body: <p>I created an Angular component derived from <a href="https://coryrylan.com/blog/angular-custom-form-controls-with-reactive-forms-and-ngmodel" rel="noreferrer">this blog post</a>. I have it in a reactive form and I would like to get the errors on the form control, the component itself will have a stylized error message that it will render when the control has an error on it. However when I try to inject the NgControl class into the component I am getting circular reference issues, so how would I access the errors on the control?</p>
  
  <p>Here is the current code, it's not complete yet but it should give the basic idea of what I am trying to accomplish:</p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, Output, EventEmitter, Input, forwardRef } from '@angular/core';
  import {
      NgControl,
      NG_VALUE_ACCESSOR,
      ControlValueAccessor,
      Validator,
      AbstractControl,
      FormControl,
      NG_VALIDATORS
  } from '@angular/forms';
  
  @Component({
      selector: 'form-field-input',
      templateUrl: './form-field-input.component.html',
      styleUrls: ['./form-field-input.component.less'],
      providers: [{
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() =&gt; FormFieldInputComponent),
          multi: true
      }]
  })
  export class FormFieldInputComponent implements ControlValueAccessor {
  
      private propagateChange = (_: any) =&gt; { };
      private propagateTouch = (_: any) =&gt; { };
  
      @Input('label') label: string;
      @Input('type') type: string;
      @Input('id') id: string;
      @Input('formControlName') formControlName: string;
      @Input('error') error: string;
      @Input('classes') classes: any;
  
      private value: string;
      private data: any;
  
      constructor() {
          debugger;
      }
  
      private onChange(event) {
          this.data = event.target.value;
          this.propagateChange(this.data);
          this.propagateTouch(this.data);
      }
  
      writeValue(obj: any): void {
          this.data = obj;
      }
      registerOnChange(fn: any): void {
          this.propagateChange = fn;
      }
      registerOnTouched(fn: any): void {
          this.propagateTouch = fn;
      }
  }
  </code></pre>
  
  
  
  <p>template file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-field-input-component"&gt;
      &lt;input id="{{id}}"
             type="{{type}}"
             class="form-field-input"
             [value]="data"
             (change)="onChange($event)"
             (keyup)="onChange($event)" /&gt;
      &lt;span class="context-icon fa fa-lock"&gt;&lt;/span&gt;
      &lt;span class="info-icon fa fa-info-circle"&gt;&lt;/span&gt;
      &lt;!-- I will have an NGIF here to check for errors before rendering the error --&gt;
      &lt;div class="form-error"&gt;
          {{ error }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>