title: How to build reusable field for reactive form in Angular
body: <p>I am trying to build a reusable field component for reactive form but I am unable to get a value from <code>custom-input</code> component.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;form&quot; (ngSubmit)=&quot;submit()&quot;&gt;
    &lt;custom-input id=&quot;name&quot; name=&quot;name&quot; formControlName=&quot;name&quot;&gt;&lt;/custom-input&gt;
    &lt;button type=&quot;submit&quot; name=&quot;button&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>My custom input reusable componeent</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  import { FormControl } from &quot;@angular/forms&quot;;
  
  @Component({
    selector: 'custom-input',
    template: '&lt;input type=&quot;text&quot; [class]=&quot;class&quot; [id]=&quot;id&quot; [name]=&quot;name&quot; [formControlName]=&quot;formControlName&quot;&gt;',
    styles: []
  })
  export class CustomInputComponent implements OnInit {
    @Input() public id: string;
    @Input() public class: string;
    @Input() public name: string;
    @Input() public formControlName: string;
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>