title: Angular 7 Reactive forms "No value accessor for form control with unspecified name attribute"
body: <p>I am using reactive forms and i seem to be having issues with what would seem random form fields. Any ideas as to why this is happening is apriciated. </p>
  
  <p>I have just started using angular and material 7 if that helps</p>
  
  <p>Interestingly enough adding and removing elements in the form causes issues with other elements.</p>
  
  <blockquote>
    <p>ERROR Error: No value accessor for form control with unspecified name
    attribute</p>
  </blockquote>
  
  <p>TS</p>
  
  <pre><code>export class VolunteerApplicationPersonalStepComponent implements OnInit 
  {
  
    public readonly form: FormGroup;
      constructor(private fb: FormBuilder) {
          this.form = this.fb.group({
            businessTelephoneExt: [''],
            otherTelephone: [''],
            otherTelephoneExt: [''],
          });
        }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;form [formGroup]="form"&gt;
  
       &lt;mat-form-field&gt;
          &lt;input matInput i18n-placeholder placeholder="Business Extension"
                 [formControl]="form.get('businessTelephoneExt')"&gt;
        &lt;/mat-form-field&gt;
  
        &lt;app-telephone-input i18n-placeholder placeholder="Other Telephone"
                             [formControl]="form.get('otherTelephone')"&gt;
        &lt;/app-telephone-input&gt;
  
        &lt;mat-form-field&gt;
          &lt;input matInput i18n-placeholder placeholder="Other Extension"
                 [formControl]="form.get('otherTelephoneExt')"&gt;
        &lt;/mat-form-field&gt;
  
        &lt;br&gt;
  
        &lt;div class="group-margin group-min-width"&gt;
          &lt;button mat-stroked-button color="primary" matStepperPrevious i18n&gt;Previous&lt;/button&gt;
          &lt;button mat-raised-button color="primary" matStepperNext (click)="next()" i18n&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HRZtX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HRZtX.png" alt="enter image description here"></a></p>
  
  <p>as someone suggested .. formControlName="businessTelephoneExt"</p>
  
  <p><a href="https://i.stack.imgur.com/FsiTH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FsiTH.png" alt="enter image description here"></a></p>
  
  <p>App-Telephone Code (Note it used to have formControl NOT appFormControl)</p>
  
  <pre><code>export class TelephoneInputComponent implements OnInit {
  
    @Input() public required = false;
    @Input() public placeholder = '';
    @Input() public appFormControl: NgControl;
  
    constructor() {
    }
  
    public ngOnInit() {
    }
  }
  
  
  
  &lt;mat-form-field&gt;
    &lt;input
      matInput
      type="tel"
      [required]="required"
      [placeholder]="placeholder"
      [formControl]="appFormControl"&gt;
  
    &lt;mat-hint i18n&gt;Please enter digits only&lt;/mat-hint&gt;
  
    &lt;mat-error
      *ngIf="appFormControl.hasError('phone')"
      i18n&gt;Invalid phone (requires 10 digits)
    &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>