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 [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.

30 Answers

I fixed this error by adding the name="fieldName" ngDefaultControl attributes to the element that carries the [(ngModel)] attribute.

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; 

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.

I also had the same error , angular 7

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

I just added ngDefaultControl

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

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 ], 

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> 

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, }; 

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

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 :)

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

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: '' }) } } 

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

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

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

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

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>.

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.

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> <option *ngFor="let mystate of data.states" value="{{mystate.stateAbbreviation}}" [(ngModel)]="dependent.state">{{mystate.stateName}}</option> </select> 

Instead of this:

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

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.

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.

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> <div> <div> <div> <div *ngIf="currentInvitation"> <div> ... 

I hope this can be helpful.

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.

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(...) 

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

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.

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

#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.

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

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

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

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:

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