No value accessor for form control

Question

I m using Angular2-rc5  and I m currently getting an error on my login page  I m trying to make a form but the console throws exceptions telling me that it can t find my formcontrolls even though I create it on init  Any idea why I m getting this error     login component  import   Component  OnInit   from   angular core   import   FormGroup  FormControl  FormBuilder  Validators   from   angular forms   import   LoginService   from    login service   import   User   from        models user     Component       selector   login       providers   LoginService       templateUrl     login component html       styleUrls      login component css      export class LoginComponent implements OnInit       private loginForm  FormGroup     our model driven form     private submitted  boolean     keep track on whether form is submitted     private events  any            use later to display form changes      constructor private fb  FormBuilder  private ls LoginService             ngOnInit            this loginForm   new FormGroup               email  new FormControl      lt any gt Validators required                password  new FormControl       lt any gt Validators required   lt any gt Validators minLength 6                 rememberMe  new FormControl                         save model  User  isValid  boolean            console log  Test            console log model  isValid                Login in user     login email  any  password  any           this ls login email  password  false              Page html   lt div id  login-page  gt       lt div class  form-wrapper  gt           lt form class  login-form   formGroup   loginForm  novalidate  ngSubmit   save loginForm value  loginForm valid   gt               lt div  gt                   lt div class  input-field col s12 center  gt                       lt p class  center login-form-text  gt Login page lt  p gt                   lt  div gt               lt  div gt               lt div  gt                   lt div class  input-field col s12  gt                       lt input id  email  type  email  gt                        lt label class  center-align  for  email  formControlName  email  gt Email lt  label gt                   lt  div gt               lt  div gt               lt div  gt                   lt div class  input-field col s12  gt                       lt input id  password  type  password  gt                        lt label class  center  for  password  formControlName  password  gt Password lt  label gt                   lt  div gt               lt  div gt               lt div  gt                   lt div class  input-field col s12 m12 l12 login-text  gt                       lt input id  remember-me  type  checkbox  formControlName  rememberMe  gt                       lt label for  remember-me  gt Remember me lt  label gt                   lt  div gt               lt  div gt               lt div  gt                   lt div class  input-field col s12  gt                       lt ahref  index html  gt Login lt  a gt                   lt  div gt               lt  div gt               lt div  gt                   lt div  gt                       lt p gt  lt a href  page-register html  gt Register Now  lt  a gt  lt  p gt                   lt  div gt                   lt div  gt                       lt p gt  lt a href  page-forgot-password html  gt Forgot password   lt  a gt  lt  p gt                   lt  div gt               lt  div gt           lt  form gt       lt  div gt   lt  div gt    Exception      EXCEPTION  Uncaught  in promise   Error  Error in   LoginComponent   class LoginComponent - inline template 13 45 caused by  No value   accessor for form control with name   email

User · Answer

In my case  I used Angular forms with contenteditable elements like div and had similar problems before   I wrote ng-contenteditable module to resolve this problem

User · Answer

You are adding the formControlName to the label and not the input   You have this    lt div  gt     lt div class  input-field col s12  gt       lt input id  email  type  email  gt        lt label class  center-align  for  email  formControlName  email  gt Email lt  label gt     lt  div gt   lt  div gt    Try using this    lt div  gt     lt div class  input-field col s12  gt       lt input id  email  type  email  formControlName  email  gt        lt label class  center-align  for  email  gt Email lt  label gt     lt  div gt   lt  div gt    Update the other input fields as well

User · Answer

For anyone experiencing this in angular 9  This issue can also be experienced if you do not declare or import the component that declares your component  Lets consider a situation where you intend to use ng-select but you forget to import it Angular will throw the error  No value accessor     I have reproduced this error in the Below stackblitz demo

User · Answer

You can see formControlName in label   removing this solved my problem

User · Answer

If you get this issue  then either    the formControlName is not located on the value accessor element  or you re not importing the module for that element

User · Answer

For UnitTest angular 2 with angular material you have to add MatSelectModule module in imports section   import   MatSelectModule   from   angular material    beforeEach async      gt        TestBed configureTestingModule         declarations    CreateUserComponent          imports    ReactiveFormsModule                  MatSelectModule          MatAutocompleteModule                        providers                          compileComponents

User · Answer

If you must use the label for the formControl  Like the Ant Design Checkbox  It may throw this error while running tests  You can use ngDefaultControl  lt label nz-checkbox formControlName  quot isEnabled quot  ngDefaultControl gt      Hello  lt  label gt    lt nz-switch nzSize  quot small quot  formControlName  quot mandatory quot  ngDefaultControl gt  lt  nz-switch gt

[javascript] No value accessor for form control

Examples related to javascript

Examples related to forms

Examples related to angular

Examples related to form-control