CODEWITHSUNDEEP
htmlangularformsangular-ngmodel
Tasnim Fabiha
Tasnim Fabiha

Reputation: 1228

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

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.

Upvotes: 0

Views: 1166

Answers (3)

Trilok Singh
Trilok Singh

Reputation: 1353

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

Upvotes: 0

Sadid Khan
Sadid Khan

Reputation: 1985

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.

Upvotes: 3

Padmapriya Vishnuvardhan
Padmapriya Vishnuvardhan

Reputation: 2166

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

Upvotes: -2

Related Questions