无法绑定到“ ngModel”，因为它不是“ input”的已知属性

即使未显示组件，启动我的Angular应用程序时也会出现以下错误。

我必须注释掉<input>这样我的应用才能正常工作。

    zone.js:461 Unhandled Promise rejection: Template parse errors:Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<div><label>Created:</label><input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" /></div></div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:

我正在查看Hero插件，但与我的代码没有任何区别。

这是组件文件：

    import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';import { Intervention } from '../../model/intervention';@Component({selector: 'intervention-details',templateUrl: 'app/intervention/details/intervention.details.html',styleUrls: ['app/intervention/details/intervention.details.css']})export class InterventionDetails{@Input() intervention: Intervention;public test : string = "toto";}

#1楼

为了能够对表单输入使用双向数据绑定，您需要在Angular模块中导入FormsModule包。有关更多信息，请参见此处的Angular 2官方教程和表单的官方文档。

#2楼

是的就是这样，在app.module.ts中，我刚刚添加了：

import { FormsModule } from '@angular/forms';[...]@NgModule({imports: [[...]FormsModule],[...]
})

#3楼

当我第一次学习本教程时，main.ts看起来与现在略有不同。它看起来非常相似，但是请注意区别（最上面的是正确的）。

正确：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';platformBrowserDynamic().bootstrapModule(AppModule);

旧教程代码：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

#4楼

我从RC1升级到RC5，并收到此错误。

我完成了迁移（基于Angular2快速入门示例，引入了一个新的app.module.ts文件，将package.json更改为包括新版本和缺少的模块，最后将main.ts更改为相应地启动）。

我进行了npm update ，然后npm outdated了npm outdated以确认安装的版本正确，但仍然没有运气。

我最终完全清除了node_modules文件夹，并使用npm install重新npm install -瞧！问题解决了。

#5楼

扔进去可能会帮助某人。

假设你已经创建了一个新的NgModule，说AuthModule专门处理您的验证需求，确保进口FormsModule在AuthModule 了。

如果你会使用FormsModule只在AuthModule那么你就不会需要导入FormModule在默认AppModule

所以在AuthModule中是AuthModule ：

import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';@NgModule({imports:      [ authRouting,FormsModule],declarations: [ SignupComponent,LoginComponent]
})
export class AuthModule { }

然后忘掉进口在AppModule ，如果你不使用FormsModule其他地方。

#6楼

要消除此错误，您需要执行两个步骤

在您的应用程序模块中导入FormsModule
把它作为在@NgModule装饰进口值

基本上，app.module.ts应该如下所示：

    import { NgModule }      from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule }   from '@angular/forms';       import { AppComponent }  from './app.component';import {AppChildComponent} from './appchild.component';@NgModule({imports:      [ BrowserModule,FormsModule ],declarations: [ AppComponent, AppChildComponent ],bootstrap:    [ AppComponent ]})export class AppModule { }

希望能帮助到你

#7楼

这适用于使用普通JavaScript而不是Type Script的人们。除了引用页面顶部的表单脚本文件外，如下所示

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

您还应该告诉模块加载器加载ng.forms.FormsModule 。进行更改后，我的NgModule方法的imports属性如下所示

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

编码愉快！

#8楼

在您的应用模块中导入FormsModule 。

它会让您的应用程序运行良好。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';import { AppComponent }  from './app.component';@NgModule({imports: [BrowserModule,FormsModule],declarations: [AppComponent,ContactListCopmponent],bootstrap: [ AppComponent ]
})
export class AppModule { }

#9楼

如果在应用可接受的解决方案后仍然有人遇到错误，则可能是因为您要在input标签中使用ngModel属性的组件具有单独的模块文件。在这种情况下，也应在组件的module.ts文件中应用可接受的解决方案。

#10楼

如果正确导入FormsModule后仍然出现错误，则请在终端或Windows控制台中签入，因为您的项目未编译（由于可能是其他错误），并且您的解决方案未反映在浏览器中！

在我的情况下，控制台出现以下不相关的错误：属性“ retrieveGithubUser”在类型“ ApiService”上不存在。

#11楼

我知道这个问题是关于Angular 2的，但我使用的是Angular 4，但这些答案都无济于事。

在Angular 4中，语法必须为

[(ngModel)]

希望这可以帮助。

#12楼

有时，当您尝试使用另一个模块中未共享的模块中的组件时，会出现此错误。

例如，您有2个模块，分别具有module1.componentA.component.ts和module2.componentC.component.ts，并尝试在module2内部的模板中使用来自module1.componentA.component.ts的选择器（例如<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ），这会引发错误，即someInputVariableInModule1在module1.componentA.component.ts内部不可用-即使您在@Input() someInputVariableInModule1具有@Input() someInputVariableInModule1 someInputVariableInModule1。

如果发生这种情况，您希望共享module1.componentA以在其他模块中进行访问。因此，如果您在sharedModule内共享module1.componentA，则module1.componentA将在其他模块（在module1之外）内可用，并且每个导入@Input()模块都将能够在其模板中注入@Input()来访问选择器。声明的变量。

#13楼

为了在Angular 2，4和5+中使用[(ngModel)] ，您需要从Angular表单中导入FormsModule ...

也正是在中下在GitHub的 回购角形式的路径：

角/包/表格/ src /指令/ ng_model.ts

对于AngularJs开发人员来说 ，这可能不是一件很愉快的事情，因为您可以在任何时候随时随地使用ng-model ，但是当Angular尝试分离模块以使用当时想要使用的任何东西时， ngModel现在在FormsModule中 。

另外，如果您使用的是ReactiveFormsModule，也需要将其导入。

因此，只需查找app.module.ts并确保已将FormsModule导入...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule, FormsModule //<<<< and here],providers: [],bootstrap: [AppComponent]
})export class AppModule { }

这也是ngModel中Angular4 ngModel的当前开始注释：

/*** `ngModel` forces an additional change detection run when its inputs change:* E.g.:* ```* <div>{{myModel.valid}}</div>* <input [(ngModel)]="myValue" #myModel="ngModel">* ```* I.e. `ngModel` can export itself on the element and then be used in the template.* Normally, this would result in expressions before the `input` that use the exported directive* to have and old value as they have been* dirty checked before. As this is a very common case for `ngModel`, we added this second change* detection run.** Notes:* - this is just one extra run no matter how many `ngModel` have been changed.* - this is a general problem when using `exportAs` for directives!*/

如果您想使用输入形式而不是表单形式，可以将其与ngModelOptions一起使用，并使其独立为true ...

[ngModelOptions]="{standalone: true}"

欲了解更多信息，在角部看ng_model 这里

#14楼

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule     ],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

#15楼

如果首先需要使用[(ngModel)]则需要在FormsModule中导入app.module.ts ，然后添加导入列表。像这样：

app.module.ts

import import {FormsModule} from "@angular/forms";
导入导入imports: [ BrowserModule, FormsModule ],

app.component.ts

示例： <input type="text" [(ngModel)]="name" >
然后<h1>your name is: {{name}} </h1>

#16楼

对于我的场景，我必须将[CommonModule]和[FormsModule]都导入到我的模块中

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { MyComponent } from './mycomponent'@NgModule({imports: [CommonModule,FormsModule],declarations: [MyComponent ]})
export class MyModule { }

#17楼

简单的解决方案：在app.module.ts中

例子1

import {FormsModule} from "@angular/forms";
// add in imports imports: [BrowserModule,FormsModule],

例子2

如果要使用[（ngModel）]，则必须在app.module.ts中导入FormsModule

import { FormsModule  } from "@angular/forms";
@NgModule({declarations: [AppComponent, videoComponent, tagDirective, ],imports: [BrowserModule,  FormsModule],providers: [ApiServices],bootstrap: [AppComponent]
})
export class AppModule { }

#18楼

我正在使用Angular 5。

就我而言，我也需要导入RactiveFormsModule。

app.module.ts（或anymodule.module.ts）

import { FormsModule, ReactiveFormsModule } from '@angular/forms';@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule],

#19楼

在您愿意使用ngModel的模块中，您必须导入FormsModule

import { FormsModule } from '@angular/forms';@NgModule({imports: [FormsModule,],})
export class AbcModule { }

#20楼

对于Angular 2中的任何版本，您都需要在app.module.ts文件中导入FormsModule，它将解决此问题。

#21楼

您需要导入FormsModule

打开app.module.ts

并添加行

import { FormsModule } from '@angular/forms';

和

@NgModule({
imports: [FormsModule
],
})

#22楼

ngModel来自FormsModule。在某些情况下，您会收到此类错误：

您没有将FormsModule导入到声明了组件的模块（使用ngModel的组件）的import数组中。
您已将FormsModule导入一个模块，该模块是另一模块的继承。在这种情况下，您有两个选择：
- 让FormsModule从两个模块（模块1和模块2）导入到导入数组中。 通常，导入模块不提供对其导入模块的访问。（导入不会被继承）

在Form1中将FormsModule声明为导入和导出数组，然后在model2中也可以看到它

（在某些版本中，我遇到了此问题）您已正确导入FormsModule，但问题出在输入HTML标记上。您必须为输入添加名称标签属性，并且[（ngModel）]中的对象绑定名称必须与名称属性中的名称相同

#23楼

我正在使用Angular 7

我必须导入ReactiveFormsModule，因为我正在使用FormBuilder类创建反应形式。

import {
FormsModule,
ReactiveFormsModule } from '@angular/forms';@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule], declarations: []})

#24楼

您需要导入FormsModule

打开app.module.ts

并添加行

import { FormsModule } from '@angular/forms';

和

@NgModule({
imports: [FormsModule
],
})

#25楼

您需要导入FormsModule 根模块中，如果这部分是根，即app.module.ts

请打开app.module.ts

从@ angular / forms导入FormsModule

例如：

import { FormsModule } from '@angular/forms';

和

@NgModule({
imports: [FormsModule
],
})

#26楼

在ngModule您需要导入FormsModule ，因为ngModel来自FormsModule 。请像我分享的以下代码一样修改您的app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';@NgModule({declarations: [AppComponent,HomeComponent],imports: [BrowserModule,AppRoutingModule,FormsModule],bootstrap: [AppComponent]
})
export class AppModule { }

#27楼

最近，我发现错误不仅发生在您忘记在模块中导入FormsModule的情况下。就我而言，问题出在这段代码中

<input type="text" class="form-control" id="firstName"formControlName="firstName" placeholder="Enter First Name" value={{user.firstName}} [(ngModel)]="user.firstName">

我通过更改formControlName- > name进行修复

<input type="text" class="form-control" id="firstName"name="firstName" placeholder="Enter First Name" value={{user.firstName}} [(ngModel)]="user.firstName">

我希望这个答案可以为遇到同样问题的人节省时间。

#28楼

有时，即使我遇到相同的错误，如果我们已经导入了BrowserModule ， FormsModule和其他相关模块，那么我意识到我们需要按Order导入它们，但我错过了。因此，顺序应类似于BrowserModule ， FormsModule ， ReactiveFormsModule 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';@NgModule({imports: [BrowserModule,FormsModule,ReactiveFormsModule     ],providers: [],declarations: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule {}

希望这可以帮助某人.. :)

#29楼

ngModel是FormsModule的一部分。并且应该从@ angular / forms导入以与ngModel一起使用。

请按以下方式更改app.module.ts：

import { FormsModule } from '@angular/forms';[...]@NgModule({imports: [[...]FormsModule],[...]
})

#30楼

由于没有在规格文件中添加FormsModule，因此在运行角度测试时出现相同的错误。我们需要将其添加到所有规范文件中，而要使应用程序成功运行，我们将在app.module.ts中添加一个位置。