title: How to use reactive form's formControlName with a custom component in Angular
body: <p>I'm creating a simple Reactive form in Angular. There is already <a href="https://stackoverflow.com/questions/41070478/no-value-accessor-for-form-control">this</a> question and is marked duplicate.</p>
  <p>But mine is different. In my case I've a custom component on which I want to use <code>formControlName</code>.
  Though the form is working correctly but there is an error on console. Please tell me how to fix this.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;form [formGroup]=&quot;myReactiveform&quot; (ngSubmit)=&quot;submitForm()&quot;&gt;
    &lt;my-file-uploader
      formControlName=&quot;attatchmentControl&quot;&gt;
    &lt;/my-file-uploader&gt;
    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>TS</strong></p>
  <pre><code>myReactiveform: FormGroup;
  
  ngOnInit(): void {
    this.myReactiveform= new FormGroup({
      attatchmentControl: new FormControl('', [])
    });
    submitForm() {
      ...
    }
  }
  </code></pre>
  <p><strong>my-file-uploader.component.html</strong></p>
  <pre><code>&lt;input type=&quot;file&quot; single&gt;
  </code></pre>
  <p><strong>Error</strong></p>
  <blockquote>
  <p>ERROR Error: No value accessor for form control with name: 'attatchmentControl'
  at _throwError (forms.js:2574:1)
  at setUpControl (forms.js:2394:1)
  at FormGroupDirective.addControl (forms.js:5626:1)
  at FormControlName._setUpControl (forms.js:6177:1)
  at FormControlName.ngOnChanges (forms.js:6122:1)
  at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471:1)
  at callHook (core.js:2490:1)
  at callHooks (core.js:2457:1)
  at executeInitAndCheckHooks (core.js:2408:1)
  at selectIndexInternal (core.js:8194:1)</p>
  </blockquote>