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

Question

在下面的组件中，当组件加载到 angular4 应用程序中时，我不断收到错误：

ng:///HeaderModule/HeaderComponent.ngfactory.js:334 错误错误：否 具有未指定名称属性的表单控件的值访问器

我尝试删除

ngModel

和

value

属性，但没有任何效果。

我假设问题出在标题 .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>

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

Answer 1

使用

ngDefaultControl

指令使您的表单具有默认

2way

绑定

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

Answer 2

如果您忘记为

name

指定

ngModel

属性，则会发出此错误。

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

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

如您所见，没有

name

属性。

Answer 3

如果您尝试将 ngModel 添加到非输入元素，也会发生此错误。确保仅将 ngModel 添加到标签中。就我而言，我在 HTML select Tag

 中添加了一个 ngModel 到 

<option>

 而不是 

<select>

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()">

Answer 5

在 ionic 4 中，我的代码中出现此错误：

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

我将代码更改为： （ngModel 在我的代码中是不必要的）

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

现在错误未显示:)

Answer 6

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

我意识到这篇文章已经有 5 年历史了，但是当我在尝试迁移到 Angular 14 独立组件后遇到类似的问题和错误时，这是我最终看到的堆栈溢出帖子。所以这就是我将发布我的解决方案的地方。

将较大的项目转换为独立组件后，我突然在运行时发现如下错误，尽管项目构建得很好：

ERROR 错误：名称为“{some name}”的表单控件没有值访问器

如果您遇到类似情况，我找到了原因，一旦您知道要查找什么，修复就非常非常容易。

基本上，当我将项目转换为独立组件时，我逐渐将越来越多的模块迁移到独立组件中，通常是从叶级开始逐渐向上。

但是对于一个模块（无论出于何种原因）我已经以不同的方式转换了它。

这又导致我将错误的组件导入到我的新独立组件之一中。

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

在这些情况下，您需要做的是查找导致运行时表单问题的名称，并查看它已绑定到哪个子组件。

该组件可能尚未正确导入。就我而言，事实并非如此。一旦您确保正确导入您的组件，此错误就会消失。

或者至少对我来说是这样。 YMMV.

Answer 7

现在已经2024年了，不知道为什么这个问题还存在。我也尝试了上面的方法，但没有一个有效。最后，我必须创建一个“MockMyComponent”组件来修复 test.spec.ts 文件中的单元测试问题。