title: Angular form: Equivalent of constructor ngForm injection for Reactive Forms?
body: <p>I am trying to build a component to show validation error messages like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input ngModel name=&quot;firstname&quot; required&gt;
    &lt;validation-error for=&quot;firstname&quot;&gt;&lt;/validation-error&gt; 
  &lt;/form&gt;
  </code></pre>
  <p>The <code>&lt;validation-error&gt;</code> component is amazingly simple for Template Driven forms as we can inject the <code>NgFrom</code> in the constructor and use <code>ngFrom.form.get(myControlName)</code> to find a control an its state:</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'validation-error',
    template: `{{errorText}}`,
    styles: [`:host { display:block; color:red; }`]
  })
  export class ValidationErrorComponent  {
    @Input() for: string;  // name of input element
    constructor(
      @Optional() private ngForm: NgForm  // This works for Template forms only.
    ) { }
  
    get errorText() : string {
      const formControl = &lt;FormControl&gt;this.ngForm.form.get(this.for);
      return (formControl.errors) ? JSON.stringify(formControl.errors) : &quot;[no error]&quot;;
    }
  }
  </code></pre>
  <p>But the <code>NgForm</code> only seems to be injected for Template Forms. Is there an equivalent provider for Reactive Forms that gives access to the enclosing <code>FormGroup</code>?</p>