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

Here is my Angular component:

@Component( {
    selector: 'input-extra-field',
    template: `
            <div class="form-group" [formGroup]="formGroup" >
                <switch [attr.title]="field.etiquette" 
                    [attr.value]="field.valeur" [(ngModel)]="field.valeur"
                    [formControl]="fieldControl" [attr.id]="name" [attr.disabled]="disabled">
                </switch>
                <error-messages [control]="name"></error-messages>
            </div>
    `
} )

Here is my Class:

export class SwitchExtraField extends ExtraField {
    @Input() field: ExtraFormField;
    @Input() entity: { fields: Object };
    @Input() formGroup: FormGroup;

    constructor( formDir: NgForm ) {
        super( null, null, formDir );
    }

    get disabled(): string {
        if ( this.field && !!this.field.saisissable && !this.field.saisissable )     {
            return 'disabled';
        }
        return null;
    }
}

This is the error I get when compiling:

ERROR Error: No value accessor for form control with unspecified name attribute
  at _throwError (forms.es5.js:1918)
  at setUpControl (forms.es5.js:1828)
  at FormControlDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlDirective.ngOnChanges (forms.es5.js:4617)

When I change the element switch to input it works, knowing that I'm using the same structure to other components and it works fine.

angular form-control

Solution 1:^[1]

I had the same problem and the issue was that my child component had an @input named formControl.

So I just needed to change from:

<my-component [formControl]="formControl"><my-component/>

to:

<my-component [control]="control"><my-component/>

ts:

@Input()
control:FormControl;

Solution 2:^[2]

I also received this error while writing a custom form control component in Angular 7. However, none of the answers are applicable to Angular 7.

In my case, the following needed to be add to the @Component decorator:

  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyCustomComponent),  // replace name as appropriate
      multi: true
    }
  ]

This is a case of "I don't know why it works, but it does." Chalk it up to poor design/implementation on the part of Angular.

Solution 3:^[3]

I also had the same error , angular 7

 <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  class="dropdown-item fontstyle"
     *ngFor="let city of Cities; let i = index">
      {{city.name}}
 </button>

I just added ngDefaultControl

   <button (click)="Addcity(city.name)" [(ngModel)]="city.name"  ngDefaultControl class="dropdown-item fontstyle"
 *ngFor="let city of Cities; let i = index">
  {{city.name}}

Solution 4:^[4]

I was facing this error while running Karma Unit Test cases Adding MatSelectModule in the imports fixes the issue

imports: [
        HttpClientTestingModule,
        FormsModule,
        MatTableModule,
        MatSelectModule,
        NoopAnimationsModule
      ],

Solution 5:^[5]

I was getting this error message in my Unit tests with Jasmine. I added ngDefaultControl attribute to the custom element(in my case it was an angular material slide toggle) and this resolves the error.

<mat-slide-toggle formControlName="extraCheese">
  Extra Cheese
</mat-slide-toggle>

Change the above element to include ngDefaultControl atttribute

<mat-slide-toggle ngDefaultControl formControlName="extraCheese">
 Extra Cheese
</mat-slide-toggle>

Solution 6:^[6]

In my case I forgot to add providers: [INPUT_VALUE_ACCESSOR] to my custom component

I had INPUT_VALUE_ACCESSOR created as:

export const INPUT_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextEditorComponent),
  multi: true,
};

Solution 7:^[7]

I had this same error- I accidentally binded [(ngModel)] to my mat-form-field instead of the input element.

Solution 8:^[8]

I also received this error when I named one of my component inputs 'formControl'. Probably it's reserved for something else. If you want to pass FormControl object between components, use it like that:

@Input() control: FormControl;

not like this:

@Input() formControl: FormControl;

Weird - but working :)

Solution 9:^[9]

In my case i used directive, but hadn't imported it in my module.ts file. Import fixed it.

Solution 10:^[10]

This is kind of stupid, but I got this error message by accidentally using [formControl] instead of [formGroup]. See here:

WRONG

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formControl]="formGroup"> <!-- '[formControl]' IS THE WRONG ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

RIGHT

@Component({
  selector: 'app-application-purpose',
  template: `
    <div [formGroup]="formGroup"> <!-- '[formGroup]' IS THE RIGHT ATTRIBUTE -->
      <input formControlName="formGroupProperty" />
    </div>
  `
})
export class MyComponent implements OnInit {
  formGroup: FormGroup

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      formGroupProperty: ''
    })
  }
}

Solution 11:^[11]

In my case the problem was that i created an @Input variable with the reserved name formControl.

Solution 12:^[12]

In my case, it was happening in my shared module and I had to add the following into @NgModule:

...
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule
  ],
...

Solution 13:^[13]

In my case, I had inserted [(ngModel)] on label rather than input. There is also a caveat, I tried running after correctly the above error in the specified line but the error wouldn't go. If there are other places where you have committed the same mistake, it still throws you the same error at the same line

Solution 14:^[14]

This error also occurs if you try to add ngModel to the non-input elements like <option> HTML tags. Make sure you add ngModel only to the <input> tags. In my case, I have added a ngModel to the <ion-select-option> instead of <ion-select>.

Solution 15:^[15]

I was using a formControl in a mat-select like this:

<mat-select [formControl]="control">
 ...
</mat-select>

and I realized that MatSelectModule was not imported in the spec file, that solved the issue.

Solution 16:^[16]

If this helps somebody, I was getting this error cause I had the ngModel inside the option tag on a select.

By mistake (mine), I had this:

<select class="form-control">
    <option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" [(ngModel)]="dependent.state">{{mystate.stateName}}</option>
</select>

Instead of this:

<select class="form-control" [(ngModel)]="dependent.state">
    <option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" >{{mystate.stateName}}</option>
</select>

Solution 17:^[17]

I had this same error, I had a input field named control in my custom Form Component but was accidentally passing control in input named formControl. Hope no one faces that issue.

Solution 18:^[18]

In my case it was as daft as having registered the new component for DI in my app.module.ts declarations but not in exports.

Solution 19:^[19]

I had the same error, but in my case apparently it was a synchronization issue, at the moment of render the components html.

I followed some of the solutions proposed on this page but any of them worked for me, at least not completely.

What did actually solve my error was to write the below code snippet inside the father html tag of the elements .

I was binding to the variable.

Code:

    *ngIf="variable-name"

The error was caused, apparently by the project trying to render the page, apparently at the moment of evaluating the variable, the project just could no find its value. With the above code snippet you make sure that before rendering the page you ask if the variable has being initialized.

This is my component.ts code:

import { Component, OnInit } from '@angular/core';
import { InvitationService } from 'src/app/service/invitation.service';
import { BusinessService } from 'src/app/service/business.service';
import { Invitation } from 'src/app/_models/invitation';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
  selector: 'app-invitation-details',
  templateUrl: './invitation-details.component.html',
  styleUrls: ['./invitation-details.component.scss']
})
export class InvitationDetailsComponent implements OnInit {
  invitationsList: any;
  currentInvitation: any;
  business: any;
  invitationId: number;
  invitation: Invitation;

  constructor(private InvitationService: InvitationService, private BusinessService: 
BusinessService) { 
this.invitationId = 1; //prueba temporal con invitacion 1
this.getInvitations();
this.getInvitationById(this.invitationId);
  }

   ngOnInit() {

  }

  getInvitations() {
    this.InvitationService.getAllInvitation().subscribe(result => {
      this.invitationsList = result;
      console.log(result);
    }, error => {
      console.log(JSON.stringify(error));
    });
  }

  getInvitationById(invitationId:number){
    this.InvitationService.getInvitationById(invitationId).subscribe(result => {
      this.currentInvitation = result;
      console.log(result);
      //this.business=this.currentInvitation['business'];
       //console.log(this.currentInvitation['business']); 
     }, error => {
     console.log(JSON.stringify(error));
    });
  }
      ...

Here is my html markup:

<div class="container-fluid mt--7">
  <div class="row">
    <div class="container col-xl-10 col-lg-8">
      <div class="card card-stats ">
        <div class="card-body container-fluid form-check-inline" 
         *ngIf="currentInvitation">
          <div class="col-4">
             ...

I hope this can be helpful.

Solution 20:^[20]

Have you tried moving your [(ngModel)] to the div instead of the switch in your HTML? I had the same error appear in my code and it was because I bound the model to a <mat-option> instead of a <mat-select>. Though I am not using form control.

Solution 21:^[21]

In my case it was a component.member which was not existing e.g.

[formControl]="personId"

Adding it to the class declaration fixed it

this.personId = new FormControl(...)

Solution 22:^[22]

I was facing this issue while running unit tests. To fix I added the MatSlideToggleModule to the imports in my spec.ts file.

Solution 23:^[23]

It is looks like "formControl" is reserved name by Angular Forms, when I used this name as an input to my component, I got unexpected behavior with my actual from control. If you ask me, this is an Angular bug. Just replace your input name to something else like "frmCtrl" or whatever, and it will work.

Solution 24:^[24]

In my case, the error was triggered by duplicating an import of a component in the module.

Solution 25:^[25]

#Background

NativeScript 6.0

In my case, the error was triggered by changing element tag from to by fault. Inside <TextView an [(ngModel)]="name". was defined.

After removing [(ngModel)]="name" error was gone.

Solution 26:^[26]

I had the same error just need to import forms module in module.ts

import { FormsModule } from '@angular/forms';
    
@NgModule({
    imports: [FormsModule]
)}

Solution 27:^[27]

I'm facing the same problem when I try to integrate angular editor

I resolve that by adding [ngModelOptions]="{standalone: true}" to my tag.

<angular-editor [ngModelOptions]="{standalone: true}" [(ngModel)]="htmlContent" [config]="config"></angular-editor>

I hope it's the quickest solution reference

Solution 28:^[28]

This happens when you use ngModel or formControl on an element which cannot have a value like a <div> element.

Problem occurs when ngModel or formControl is used like this:

<div [(ngModel)]="myModel"> <--- wrong place
    <input type="text" />
</div>

Solution:

<div>
    <input type="text" [(ngModel)]="myModel" /> <--- correct place
</div>

Source: https://github.com/angular/angular/issues/43821#issuecomment-992305494

Solution 29:^[29]

in my case, I had a <TEXTAREA> tag from old html while converting to angular. Had to change to <textarea>.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ahmad Baktash Hayeri
Solution 2	theMayer
Solution 3	Nadeem Qasmi
Solution 4	Dan Patil
Solution 5	Sudharshan
Solution 6	Jobu
Solution 7	Chris Fremgen
Solution 8	Pawel
Solution 9	Andris
Solution 10
Solution 11	Dharman
Solution 12
Solution 13	Nishanth Subramanya
Solution 14
Solution 15	Dharman
Solution 16	Danielle
Solution 17	Nikhil Arora
Solution 18	Wikooo
Solution 19	marc_s
Solution 20	mneumann
Solution 21	Stefan Michev
Solution 22
Solution 23	Hagay Levy
Solution 24	Aleks Grunwald
Solution 25	Chris S
Solution 26	Blastfurnace
Solution 27	Neel Rathod
Solution 28	Sameer Basil
Solution 29

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]

Solution 20:[20]

Solution 21:[21]

Solution 22:[22]

Solution 23:[23]

Solution 24:[24]

Solution 25:[25]

Solution 26:[26]

Solution 27:[27]

Solution 28:[28]

Solution 29:[29]