title: 'No value accessor for form control with name' while creating reusable matInput component with ControlContainer
body: <p>I'm following <a href="https://medium.com/angular-in-depth/reducing-the-forms-boilerplate-make-your-angular-forms-reusable-ee06d7c07f47" rel="nofollow noreferrer">this guide</a> with <code>ControlContainer</code> to create reusable forms, successfully created a reusable form group but when I tried to create reusable form element with <code>matInput</code>, encountered the <code>No value accessor</code> error. Here's the <code>my-form-field.ts</code> file:</p>
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import {
    ControlContainer,
    FormBuilder, FormControl,
    FormGroup,
    FormGroupDirective,
  } from '@angular/forms';
  
  @Component({
    selector: 'my-form-field',
    template: `
      &lt;mat-form-field&gt;
        &lt;mat-label&gt;{{label}}&lt;/mat-label&gt;
        &lt;input matInput [formControlName]=&quot;formControlName&quot;&gt;
      &lt;/mat-form-field&gt;
    `,
    viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
  })
  export class MyFormFieldComponent implements OnInit {
    @Input() formControlName: string;
    @Input() label: string;
    formGroup: FormGroup;
  
    constructor(private ctrlContainer: FormGroupDirective, private formBuilder: FormBuilder) {
  
    }
  
    ngOnInit(): void {
      this.formGroup = this.ctrlContainer.form;
      const control = new FormControl('');
      this.formGroup.addControl(this.formControlName, control);
    }
  }
  </code></pre>
  <p>And here's how I use it:</p>
  <pre><code>&lt;form [formGroup]='formGroup'&gt;
    &lt;my-form-field label='Test' formControlName='name'&gt;&lt;/my-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Recreated the example here:
  <a href="https://stackblitz.com/edit/angular-9-material-reusable-matinput?file=src/app/my-form-field.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-9-material-reusable-matinput?file=src/app/my-form-field.ts</a></p>
  <p>My approach could be wrong, so a suggestion for reusable matInput form component is ok too.</p>