表单控件错误：ERROR Error: 没有指定名称属性的表单控件值访问器。

Question

在下面的组件中，当该组件在Angular4应用程序中加载时，我不断收到错误信息： ng：///HeaderModule/HeaderComponent.ngfactory.js：334 ERROR错误：未指定名称属性的表单控件没有值访问器。 我尝试删除ngModel和value属性，但没有任何效果。 我认为问题出在header.component.html上。 以下是html：

<!-- Notification area-->
<li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle" (click)="changeNotificationStatus()">
        <i class="glyphicon glyphicon-bell"></i>
        <span class="visible-xs-inline">Notifications</span>
        <span class="badge badge-sm up bg-danger pull-right-xs" [hidden]="notificationCount<=0" [(ngModel)]="notificationCount"></span>
    </a>
    <div class="dropdown-menu w-xl animated fadeInUp">
</li>

不确定是什么原因导致了这个问题。 如果有人能指出问题所在将会很有帮助。

- Shruti Nair

Answer 1

使用ngDefaultControl指令，使你的表单具有默认的2way绑定。

<input type="text" [(ngModel)]="name" ngDefaultControl>

- Farhad Lavaei

---

这解决了我的IONIC4问题，但我不知道为什么- 我有另一个应用程序，它不使用ngDefaultControl，但数据绑定良好。 - Memetican

Answer 2

如果您忘记为ngModel指定name属性，则会产生此错误。

您可以在包含错误的html中找到以下行：

<span class="badge badge-sm up bg-danger pull-right-xs" [hidden]="notificationCount<=0" [(ngModel)]="notificationCount"></span>

正如您所看到的，没有name属性。

- Dinistro

---

如果有人需要帮助的话：我在使用Ionic时遇到了这个错误，谷歌让我找到了这个问题/答案。我发现问题出在我错误地将[(ngModel)]放在了ion-label上而不是ion-input上。 - John3136

Answer 3

如果您尝试将ngModel添加到非输入元素中，也会出现此错误。确保仅将ngModel添加到 <input> 标签中。在我的情况下，我已经将ngModel添加到了 HTML select标签中的 <option> 而不是 <select>。

- Randima Lahiru

---

我觉得写一个如此琐碎的答案是多么愚蠢，然后我注意到我确实这样做了，我不小心把ngModel放在了<option>中，谢谢你指出来！ - svarog

Answer 4

在我的情况下，这是这样工作的

只需添加 name="searchInput"

之前：

 <input type="text" nz-input placeholder="Search Project"
        [(ngModel)]="searchInput" (ngModelChange)="search()">

之后：

<input type="text" name="searchInput" nz-input placeholder="Search Project"
       [(ngModel)]="searchInput" (ngModelChange)="search()">

- Umashankar

Answer 5

针对Angular 14+和独立组件的特定答案

我意识到这篇文章已经五年了，但当我尝试迁移到Angular 14独立组件时遇到类似问题和错误时，我就会来到这个Stack Overflow帖子。所以这就是我要发布我的解决方案的地方。

在将一个较大的项目转换为独立组件后，尽管项目构建得非常好，但我突然发现运行时出现了下面的错误：

ERROR Error: No value accessor for form control with name '{some name}'

如果你处于类似的情况下，我找到了原因，并且一旦你知道该查找什么，修复起来非常容易。

基本上，当我将我的项目转换为独立组件时，我逐渐将更多的模块从叶级别逐步迁移到独立组件中。

但是对于一个模块（出于某种原因），我以不同的方式进行了转换。

这反过来导致我在我的新独立组件中导入了错误的组件。

基本上，我尝试导入ComponentA（它依赖于SubcomponentB），但我真正需要的只是SubcomponentB。这通过了编译器，但没有通过运行时！

在这些情况下，你需要做的是查找导致运行时表单问题的名称，并查看它绑定到了哪个子组件。很有可能这个组件没有被正确地导入。在我的情况下，确保正确导入组件后，这个错误就会消失。至少对我来说是这样的，但你的情况可能不同。

- Jostein Kjønigsen

Answer 6

在 Ionic 4 中，我的代码出现了这个错误：

<ion-label [name]="num_lable"                                       [(ngModel)]="num_temp[i]"> {{num_temp[i]}}</ion-label>

我修改了代码: (在我的代码中，ngModel是不必要的)

<ion-label> {{num_temp[i]}}</ion-label>

现在错误没有显示 :)

- Mohammad Masoudzadeh