Angular 7 Reactive forms "No value accessor for form control with unspecified name attribute"

Question

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.

I have just started using angular and material 7 if that helps

Interestingly enough adding and removing elements in the form causes issues with other elements.

ERROR Error: No value accessor for form control with unspecified name attribute

TS

export class VolunteerApplicationPersonalStepComponent implements OnInit 
{

  public readonly form: FormGroup;
    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
          businessTelephoneExt: [''],
          otherTelephone: [''],
          otherTelephoneExt: [''],
        });
      }
}

HTML

    <form [formGroup]="form">

     <mat-form-field>
        <input matInput i18n-placeholder placeholder="Business Extension"
               [formControl]="form.get('businessTelephoneExt')">
      </mat-form-field>

      <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                           [formControl]="form.get('otherTelephone')">
      </app-telephone-input>

      <mat-form-field>
        <input matInput i18n-placeholder placeholder="Other Extension"
               [formControl]="form.get('otherTelephoneExt')">
      </mat-form-field>

      <br>

      <div class="group-margin group-min-width">
        <button mat-stroked-button color="primary" matStepperPrevious i18n>Previous</button>
        <button mat-raised-button color="primary" matStepperNext (click)="next()" i18n>Next</button>
      </div>
    </form>

as someone suggested .. formControlName="businessTelephoneExt"

App-Telephone Code (Note it used to have formControl NOT appFormControl)

export class TelephoneInputComponent implements OnInit {

  @Input() public required = false;
  @Input() public placeholder = '';
  @Input() public appFormControl: NgControl;

  constructor() {
  }

  public ngOnInit() {
  }
}



<mat-form-field>
  <input
    matInput
    type="tel"
    [required]="required"
    [placeholder]="placeholder"
    [formControl]="appFormControl">

  <mat-hint i18n>Please enter digits only</mat-hint>

  <mat-error
    *ngIf="appFormControl.hasError('phone')"
    i18n>Invalid phone (requires 10 digits)
  </mat-error>
</mat-form-field>

Answer 1

seems you cannot have a @Input() named formControl

Answer 2

One little thing I see is this:

  <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                       [formControl]="form.get('otherTelephone')">
  </app-telephone-input>

So it should be:

  <app-telephone-input i18n-placeholder placeholder="Other Telephone"
                       [appFormControl]="form.get('otherTelephone')">
  </app-telephone-input>

If you want to create a custom form controler you should implement ControlValueAccessor interface

ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  ...
}

If you implement ControlValueAccessor interface only you can bind property formControl

Answer 3

@ricardo's answer is not correct

You can have a @Input() named formControl when using the ControlValueAccessor interface, it is likely you have not added a NG_VALUE_ACCESSOR token to your providers. Something like:

export const VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
};

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    providers: [VALUE_ACCESSOR]
})