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

Question

Here is my component in Angular 4    Component        selector   input-extra-field       template                 lt div class  form-group   formGroup   formGroup   gt                   lt switch  attr title   field etiquette                        attr value   field valeur    ngModel    field valeur                       formControl   fieldControl   attr id   name   attr disabled   disabled  gt                   lt  switch gt                   lt error-messages  control   name  gt  lt  error-messages gt               lt  div gt              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  amp  amp    this field saisissable  amp  amp   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

User · Answer

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   gt          this invitationsList   result        console log result          error   gt          console log JSON stringify error                   getInvitationById invitationId number       this InvitationService getInvitationById invitationId  subscribe result   gt          this currentInvitation   result        console log result           this business this currentInvitation  business             console log this currentInvitation  business              error   gt         console log JSON stringify error                            Here is my html markup    lt div class  container-fluid mt--7  gt     lt div class  row  gt       lt div class  container col-xl-10 col-lg-8  gt         lt div class  card card-stats   gt           lt div class  card-body container-fluid form-check-inline             ngIf  currentInvitation  gt             lt div class  col-4  gt                     I hope this can be helpful

User · Answer

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

User · Answer

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         lt div  formControl   formGroup  gt   lt  --   formControl   IS THE WRONG ATTRIBUTE -- gt         lt input formControlName  formGroupProperty    gt       lt  div gt         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         lt div  formGroup   formGroup  gt   lt  --   formGroup   IS THE RIGHT ATTRIBUTE -- gt         lt input formControlName  formGroupProperty    gt       lt  div gt         export class MyComponent implements OnInit     formGroup  FormGroup    constructor      private formBuilder  FormBuilder            ngOnInit         this formGroup   this formBuilder group         formGroupProperty

User · Answer

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

User · Answer

In my case  it s happening in my shared module and I had to add the following into  NgModule        imports        CommonModule      FormsModule      ReactiveFormsModule      IonicModule

User · Answer

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    lt my-component  formControl   formControl  gt  lt my-component  gt    to    lt my-component  control   control  gt  lt my-component  gt    ts    Input   control FormControl

User · Answer

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  lt mat-option gt  instead of a  lt mat-select gt   Though I am not using form control

User · Answer

I fixed this error by adding the name  fieldName  ngDefaultControl attributes to the element that carries the   ngModel   attribute

User · Answer

Background  NativeScript 6 0  In my case  the error was triggered by changing element tag from  to  by fault  Inside  lt TextView an   ngModel    quot name quot   was defined  After removing   ngModel    quot name quot  error was gone

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I also had the same error   angular 7    lt button  click   Addcity city name     ngModel    city name   class  dropdown-item fontstyle        ngFor  let city of Cities  let i   index  gt          city name     lt  button gt    I just added      ngDefaultControl      lt button  click   Addcity city name     ngModel    city name   ngDefaultControl class  dropdown-item fontstyle    ngFor  let city of Cities  let i   index  gt      city name

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      gt  TextEditorComponent     multi  true

User · Answer

I had this same error- I accidentally binded   ngModel   to my mat-form-field instead of the input element

User · Answer

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

User · Answer

in my case  I had a  lt TEXTAREA gt  tag from old html while converting to angular  Had to change to  lt textarea gt

User · Answer

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    lt mat-slide-toggle formControlName  extraCheese  gt    Extra Cheese  lt  mat-slide-toggle gt    Change the above element to include ngDefaultControl atttribute   lt mat-slide-toggle ngDefaultControl formControlName  extraCheese  gt   Extra Cheese  lt  mat-slide-toggle gt

User · Answer

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

User · Answer

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

[angular] ERROR Error: No value accessor for form control with unspecified name attribute on switch

Examples related to angular

Examples related to form-control