在表单标签中使用带有 ngModel 的名称属性，仍然出现错误 -“如果在表单标签中使用 ngModel，则必须设置名称属性...”答案

【问题标题】：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..."在表单标签中使用带有 ngModel 的名称属性，仍然出现错误 -“如果在表单标签中使用 ngModel，则必须设置名称属性...”
【发布时间】：2019-05-04 09:25:33
【问题描述】：

以下是我的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>

我已经初始化了我的 ts 文件中使用的所有变量。我已经使用 ngModel 在表单标签中绑定了模型属性，我还使用了 name 属性。

但仍然出现错误 -如果在表单标签中使用 ngModel，则必须设置 name 属性或必须在 ngModelOptions 中将表单控件定义为“独立”。

我在这里缺少什么？

我还附上了我的控制台抛出该错误的屏幕截图。

感谢任何形式的帮助/建议。

【问题讨论】：

请在表格内提供完整代码
恐怕这是一个很长的文件。您对完整形式的怀疑可以详细说明吗？
@TasnimFabiha 看到这个链接对你有帮助 stackoverflow.com/questions/47069944/…
@TasnimFabiha 尝试重建您的应用程序 ie。停止 ng serve 并重新启动它，您的代码将在正常情况下工作似乎编译器有问题
@TasnimFabiha 如果您可以在 stackblitz 中创建一个演示，那就太好了，这样我们就可以检查代码以及您使用的日期选择器：stackblitz.com/edit/angular-nym2ar

标签： html angular forms angular-ngmodel

【解决方案1】：

试试

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

【讨论】：

这里有什么区别？
#adminVerificationEndDate="ngModel" 是我猜的区别

【解决方案2】：

你使用的代码，

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

您已在此表单标记中添加名称属性，但错误仍然显示。所以，有可能您有另一个没有任何名称属性的表单标签。

但问题出在控制台中，它会显示第一个表单标签的行号，是的，这很混乱。

要正确理解这一点，请参阅this answer。

所以，具体来说，在你的情况下，

请查看控制台错误的最后一行。它表示第 140 行。

所以，我假设 第 123 行没问题（绿色框）。

您可能忽略了那条线。如果有任何名称属性，请检查 html 的第 140 行。

【讨论】：

是的，错误出现在第 140 行，其中缺少 name 属性。但是 123 不是我表单标签的第一行，甚至不是我使用 ngModel 的第一个输入字段。我不明白为什么编译器在其他输入字段中显示错误而不是实际的。

【解决方案3】：

使用此代码..

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

【讨论】：