title: use formControlName for custom input component in reactive form
body: <p>There is a custom input component and it is used in a reactive form with validation:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      moduleId: module.id.toString(),
      selector: 'custom-select',
      templateUrl: 'custom-select.component.html',
      styleUrls: ['custom-select.component.css']
  })
  export class CustomSelectComponent {
      @Input() public items: SelectModel[];
      public model: SelectModel;
      constructor(private customSelectService: CustomSelectService) {
          this.customSelectService.Selected.subscribe((data: SelectModel) =&gt; {
              this.model = data;
          });
      }
      public newSelect(select: SelectModel): void {
          this.customSelectService.updateSelected(select);
      }
  }
  </code></pre>
  
  <p>which works fine, I am using <code>custom-select</code> in a reactive form and want to validate it like below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;custom-select id="country" [items]="selectItems" formControlName="country"&gt;&lt;/custom-select&gt;
  &lt;div *ngIf=" myFrom.controls['country'].invalid &amp;&amp; (myFrom.controls['country'].dirty 
               || myFrom.controls['country'].touched) " class="ha-control-alert"&gt;
      &lt;div *ngIf="myFrom.controls['country'].hasError('required')"&gt;Country is required&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is how I declare the form in component</p>
  
  <pre class="lang-ts prettyprint-override"><code>this.myFrom = this.formBuilder.group({
      country: [null, Validators.required],
  })
  </code></pre>
  
  <p>but when I add <code>formControlName</code> for validations, it gets error which says <strong>No value accessor for form control with name: 'country'</strong>. How should I handle this?</p>