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

angular reactive forms validation
angular reactive forms example
angular 8 reactive forms
angular 7 forms
angular/forms
angular form validation
angular form example
angular 6 form submit example

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>

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

Angular 7, Learn how you can handle forms in Angular 7 web apps by leveraging Reactive Forms and post the reactive form to a REST API endpoint. This is a quick example of how to setup form validation in Angular 7 using Reactive Forms. The example is a simple registration form with pretty standard fields for first name, last name, email, password and confirm password. All fields are required, the email field must be a valid email address and the password field must have a min length of 6.

seems you cannot have a Input() named formControl

Building User Registration Form With Reactive Forms in Angular 7 , In order to work with Reactive Forms in Angular 7|8 we must import ReactiveFormsModule API in app module file. app.module.ts. import {  Angular 7|8|9 Reactive Form Setup for Select Dropdown Inject ReactiveFormsModule in app.module.ts file to work with select dropdown in Angular app. import { ReactiveFormsModule } from '@angular/forms' ; @ NgModule ( { imports : [ ReactiveFormsModule ] } )

Remove otherTelephone formcontrol from parent component and add otherTelephone from child component

export class VolunteerApplicationPersonalStepComponent implements OnInit 
{

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

Using controlContainer to provide parent form instance to child component then inject FormGroupDiretive to get parent form instance

apptelephoneinput.component.html

@Component({
  selector: 'app-telephone-input',
  templateUrl: './app-telephone-input.component.html',
  styleUrls: ['./app-telephone-input.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective 
}]
})
export class TelephoneInputComponent implements OnInit {   
  @Input() public required = false;
  @Input() public placeholder = '';
  childForm;
  constructor(private parentF: FormGroupDirective) { }

  ngOnInit() {
    this.childForm = this.parentF.form;
    this.childForm.addControl('otherTelephone', new FormControl(''))
  }

}

app-telephone-input.component.html

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

Sample example:https://stackblitz.com/edit/angular-fktkdk

Full Angular 7|8|9 Reactive Forms Validation Tutorial, This is a incomplete authentication service. For a real world and complete implementation, check out Angular 7/8 Tutorial: Using Angular  Angular 7 Forms Angular forms are used to handle user's input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks. In Angular 7, there are 2 approaches to handle user's input through forms:

Angular 9/8 Reactive Forms with Validation Tutorial by Example , Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Angular 7 - Reactive Forms Validation Example. 248.9k. 364. Files. app. New File​. Angular 7 Forms Tutorial Example is today’s leading topic. For this example, we will use Reactive forms. Reactive forms provide the model-driven approach to handle the form inputs whose values are changing over time. Reactive forms use the specific and immutable approach to managing the state of the form at the given point of time.

angular-7-reactive-form-validation, For example, if you have an input that is bound to a form control, Angular performs the control validation process for every keystroke. Now  In this tutorial we are going to take a close look at one of the two ways to create forms in angular. The reactive forms. We will dive right into code and discover all the details about reactive forms in the angular framework step by step and with easy examples.

Angular Reactive Forms: Tips and Tricks, Reactive forms; Template-driven forms. Both approaches are used to collect user input events from the view, validate the user input, create a form model and  Angular Reactive Forms | Angular 9/8/7 Reactive Forms Example Step 1: Registering the Reactive Forms module. To use reactive forms, import ReactiveFormsModule from the @angular/forms Step 2: Configure FormGroup and FormControl. Write the following code inside the app.component.ts file. The

Comments
  • you tried formControlName="businessTelephoneExt"?
  • that made no difference
  • did you try commenting out your app-telephone-input custom controls, to ensure its not an issue with that?
  • it does seem like custom components are causing it
  • renamed to appFormControl and now its fine... what is the deal with component naming conventions?