Using name attribute with ngModel in a form tag, still getting error -“If ngModel is used within a form tag, either the name attribute must be set…”

1
votes

Following is my html:

<div class="form-row">
  <div class="form-group col-md-3">
    <input [(ngModel)]="model.adminVerificationEndDate" name="adminVerificationEndDate" 
           type="text" autocomplete="off" class="form-control form-control-sm"
           [bsConfig]="datePickerConfig" bsDatepicker [minDate]="currentDate" required/>
  </div>
</div>

I have initialized all the variables used in my ts file. I have bound the model property within the form tag by using ngModel, I have also used the name attribute.

But still getting the error -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.

What I am missing here?

I have also attached the screenshot of my console throwing that error.

Error showing on console

the line of code where the error is generated

Any kind of help/suggestions is appreciated.

3
htmlangularformsangular-ngmodel
please give you full code inside form - Sadid Khan
I am afraid that's a very long file. what you are suspecting from full form can you elaborate? - Tasnim Fabiha
@TasnimFabiha see this link it will be helpful to u stackoverflow.com/questions/47069944/… - Jignesh Joisar
@TasnimFabiha try rebuilding your app the ie. stop ng serve and start it again , your code will work in normal case seems like somethings wrong with compiler - Joel Joseph
@TasnimFabiha also if you could create a demo in stackblitz it would be great, so that we can check the code along with the datepicker that you have used : stackblitz.com/edit/angular-nym2ar - Joel Joseph

3 Answers

3
votes

The code you used,

<div class="form-row">
   <div class="form-group col-md-3">
      <input [(ngModel)]="model.adminVerificationEndDate" name="adminVerificationEndDate"
       type="text" autocomplete="off" class="form-control form-control-sm"
       [bsConfig]="datePickerConfig" bsDatepicker [minDate]="currentDate" required/>
   </div>
</div>

you have added name attribute in this form tag but the error is still showing. so, there is a possibility that you have another form tag that doesn't have any name attribute.

But the problem is in console it will show the line number of first form tag and yes, it is confusing.

to understand this properly please see this answer.

so, In your case specifically,

enter image description here please see the last line of the console error. It denotes line number 140.

So, I assume line 123 is ok (green box).

you are probably overlooking that line. check that line 140 of html also if there is any name attribute.

0
votes

use this code..

 <input [(ngModel)]="model.adminVerificationEndDate" name="adminVerificationEndDate" 
       type="text" autocomplete="off" class="form-control form-control-sm"
       [bsConfig]="datePickerConfig" bsDatepicker [minDate]="currentDate" required/>
-2
votes

Try with 

<input [(ngModel)]="model.adminVerificationEndDate" name="adminVerificationEndDate" 
             type="text" autocomplete="off" class="form-control form-control-sm" #adminVerificationEndDate="ngModel" 
             [bsConfig]="datePickerConfig" bsDatepicker [minDate]="currentDate" required/>