Angular2 If ngModel is used within a form tag either the name attribute must be set or the form

Question

I am getting this error from Angular 2  core umd js 5995 EXCEPTION  Uncaught  in promise   Error  Error in app model exposure currencies model exposure currencies component html 57 18 caused by  If ngModel is used within a form tag  either the name attribute must be set or the form control must be defined as  standalone  in ngModelOptions   Example 1   lt input   ngModel    quot person firstName quot  name  quot first quot  gt   Example 2   lt input   ngModel    quot person firstName quot   ngModelOptions   quot  standalone  true  quot  gt     lt td  ngFor  quot let lag of ce lags quot  gt       lt div class  quot form-group1 quot  gt           lt input name  quot name quot    ngModel    quot lag name quot   ngModelOptions   quot  standalone  true  quot   class  quot form-control quot  pattern  quot  0-9      0-9     quot  required gt       lt  div gt   lt  td gt   This is how I use form tag   lt form  f  quot ngForm quot   ngSubmit   quot onSubmit   quot  gt

User · Answer

If ngForm is used  all the input fields which have   ngModel    quot  quot  must have an attribute name with a value   lt input   ngModel    quot firstname quot  name  quot something quot  gt

User · Answer

In order to be able to display the information in the form you would like  you need to give those specific inputs of interest names  I d recommend you do have      lt form  f  ngForm   ngSubmit   onSubmit f   gt       lt input   name  firstName  ngModel   placeholder  Enter your first name  gt

User · Answer

Try this     lt input type  quot text quot  class  quot form-control quot  name  quot name quot  placeholder  quot Name quot  required minlength  quot 4 quot   name  quot ngModel quot  ngModel gt   lt div  ngIf  quot name errors  amp  amp   name dirty    name touched  quot  gt       lt div  hidden   quot  name errors required quot  class  quot alert alert-danger form-alert quot  gt          Please enter a name       lt  div gt       lt div  hidden   quot  name errors minlength quot  class  quot alert alert-danger form-alert quot  gt          Enter name greater than 4 characters       lt  div gt   lt  div gt

User · Answer

When you clearly look at the console  it will give you two examples  Implement any of these   lt input   ngModel    quot person firstName quot   ngModelOptions   quot  standalone true  quot  gt   or  lt input   ngModel    quot person firstName quot  name  quot first quot  gt

User · Answer

As every developer have a common habit  not to read the complete error  just read the first line and start looking for answer from someone else      I am also one of them  that s why I am here   Read the error  clearly saying   Example 1   lt input   ngModel    person firstName  name  first  gt  Example 2   lt input   ngModel    person firstName   ngModelOptions    standalone  true   gt    What more we need to understand this error   Use any one option everything will work smooth

User · Answer

In my case the error happened because below in html markup one more line existed without the name attribute   lt form id  quot form1 quot  name  quot form1 quot   form  quot ngForm quot  gt       lt div class  quot form-group quot  gt           lt input id  quot input1 quot  name  quot input1 quot    ngModel    quot metaScript quot    gt                        lt input id  quot input2 quot    ngModel    quot metaScriptMessage quot   gt       lt  div gt   lt  form gt   But the browser still reports the first row has the error  And it s difficult to discover the source of mistake if you have other elements between these two

User · Answer

For me  the solution was very simple  I changed the  lt form gt  tag into a  lt div gt  and the error goes away

User · Answer

It s quite easy for a fix   For me  we had more than one inputs in the form  We need to isolate the input   line causing error and simply add the name attribute  That fixed the issue for me   Before    lt form class  example-form  gt        lt mat-form-field appearance  outline  gt             lt mat-select placeholder  Select your option    ngModel    sample stat  gt   lt  --HERE -- gt                 lt mat-option  ngFor  let option of actions   value   option  gt   option  lt  mat-option gt         lt  mat-select gt       lt  mat-form-field gt        lt mat-form-field appearance  outline  gt         lt mat-label gt Enter number lt  mat-label gt             lt input id  myInput  type  text  placeholder  Enter number  aria-label  Number          matInput  formControl   myFormControl  required   ngModel    number  gt    lt  --HERE -- gt           lt  mat-form-field gt           lt mat-checkbox   ngModel    isRight  gt Check  lt  mat-checkbox gt   lt  --HERE -- gt         lt  form gt    After  i just added the name attribute for select and checkbox and that fixed the issue  As follows    lt mat-select placeholder  Select your option  name  mySelect       ngModel    sample stat  gt   lt  --HERE  Observe the  name  attribute -- gt    lt input id  myInput  type  text  placeholder  Enter number  aria-label  Number          matInput  formControl   myFormControl  required   ngModel    number  gt    lt  --HERE -- gt    lt mat-checkbox name  myCheck    ngModel    isRight  gt Check  lt  mat-checkbox gt   lt  --HERE  Observe the  name  attribute -- gt    As you see added the name attribute  It is not necessary to be given same as your ngModel name  Just providing the name attribute will fix the issue

User · Answer

I noticed that the Chrome developer tool sometimes only underlines the first element in swiggly red even if it is correctly set up with a name  This threw me off for a while   One must be sure to add a name to every element on the form that contains ngModel regardless of which one is squiggly underlined

User · Answer

You didn t mention the version you re using  but if you re using rc5 or rc6  that  old  style of form has been deprecated   Take a look at this for guidance on the  new  forms techniques  https   angular io docs ts latest guide forms html

User · Answer

Both attributes are needed and also recheck all the form elements has  quot name quot  attribute  if you are using form submit concept  other wise just use div tag instead of form element   lt input   ngModel    quot firstname quot  name  quot something quot  gt

User · Answer

For everyone who don t panic with the error message itself  but just googling for the explanation why example from here doesn t work  i e dynamical filtering doesn t occur when the text is typed into the input field   it will not work until you will add the name parameter in the input field  Nothing points to the explanation why pipe isn t working  but the error message points to this topic and fixing it according to the accepted answer makes the dynamical filter working

User · Answer

You need import   NgForm   from  angular forms in your page ts   Code HTML    lt form  values  ngForm   ngSubmit   function values   gt         lt ion-input type  text  name  name  ngModel gt  lt  ion-input gt    lt ion-input type  text  name  mail  ngModel gt  lt  ion-input gt        lt  form gt    In your Page ts  implement your funcion to manipulate form data   function data   console log  Name   data value name     Mail      data value mail

User · Answer

lt select name  country  formControlName  country  id  country          class  formcontrol form-control-element    ngModel    country  gt      lt option value  90  gt Turkey lt  option gt      lt option value  1  gt USA lt  option gt      lt option value  30  gt Greece lt  option gt   lt  select gt    name  country  formControlName  country     ngModel    country     Those are the three things need to use ngModel inside a formGroup directive   Note that same name should be used

[angular] Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form

Examples related to angular

Examples related to angular-forms