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

我的组件中有一个简单的输入，它使用[(ngModel)]：

<input type="text" [(ngModel)]="test" placeholder="foo" />

当我启动我的应用程序时，即使没有显示该组件，我也会收到以下错误。

zone.js:461未处理的Promise拒绝：模板解析错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性。

以下是component.ts：

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";}
1393260 次浏览
小开

为了能够对表单输入使用双向数据绑定，您需要在Angular模块中导入FormsModule包。

有关更多信息，请参阅Angular 2官方教程这里和形式的官方留档。

小开
最佳答案

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

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

当我第一次做这个教程的时候，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);
小开

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

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

我做了一个npm update，然后npm outdated来确认安装的版本是正确的，仍然没有运气。

我最终完全擦除了node_modules文件夹并重新安装了npm install-瞧！问题解决了。

小开

假设您已经创建了一个新的NgModul，例如AuthModule专门用于处理您的身份验证需求，请确保在该AuthModul也中导入FormsModule。

如果您将在AuthModule中使用FormsModule只有，那么您不需要导入FormModule在默认的AppModule。

在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 { }

如果您在其他任何地方都不使用FormsModule，那么请忘记导入AppModule。

小开

您需要遵循两个步骤来消除此错误：

  1. 在您的应用模块中导入FormsModule
  2. 将其作为导入值传递给@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 { }
小开

这适用于使用纯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],

小开

在您的应用模块中导入模块名称。

这将使您的应用程序运行良好。

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 { }
小开

如果有人在应用已接受的解决方案后仍然出现错误，可能是因为您要在输入标记中使用ngModel属性的组件有一个单独的模块文件。在这种情况下，也在组件的module.ts文件中应用已接受的解决方案。

小开

如果您在正确导入FormsModul后仍然收到错误，请检查您的终端或（Windows控制台），因为您的项目未编译（因为可能是任何其他错误），并且您的解决方案尚未反映在浏览器中！

在我的情况下，我的控制台有以下不相关的错误：

属性'检索GithubUser'在类型'ApiService'上不存在。

小开

我知道这个问题是关于Angular 2的，但我在Angular 4上，这些答案都没有帮助。

在Angular 4中，语法需要

[(ngModel)]
小开

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

例如，你有2个module1.componentA.component.ts和module2.componentC.component.ts的模块，你尝试在module2内的模板中使用module1.componentA.component.ts的选择器（例如<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">），它会抛出错误，即在module1.componentA.component.ts内不可用-即使你在module1.componentA中有@Input() someInputVariableInModule1。

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

小开

要在角2、4和5+中使用[(ngModel)]，您需要从Angular形式导入模块名称…

此外，它在github上的Angular仓库表单下的此路径中：

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

可能这对AngularJS开发者来说不是一个非常愉快的事情，因为你可以在任何地方使用ng-模型，但是当Angular试图分离模块以使用你当时想要使用的任何东西时，ngModel现在在模块名称中。

此外，如果您使用的是响应模块，它也需要导入它。

因此，只需查找app.module.ts并确保您在…

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

此外，这些是模块名称中Angular4ngModel的当前起始注释：

/*** `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一起使用并使独立的真正…

[ngModelOptions]="{standalone: true}"

有关更多信息，请查看Angular部分这里中的ng_model。

小开 
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 {}
小开

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

文件app.module.ts

  1. 导入import {FormsModule} from "@angular/forms";
  2. 添加导入imports: [ BrowserModule, FormsModule ],

文件app.component.ts

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

对于我的场景，我必须同时导入到我的模块中

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 { }
小开

简单的解决方案：在文件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 { }
小开

我正在使用Angular 5。

在我的例子中，我也需要导入ReactiveFormsModul。

文件app.module.ts（或anymodule.module.ts）：

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

在你愿意使用ngModel的模块中，你必须导入模块名称

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

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

小开

您需要导入表单模块。

打开app.module.ts并添加行

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

和

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

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

  1. 您没有将FormsModule导入到声明您的组件的模块导入数组中-使用ngModel的组件。
  2. 您已经将FormsModule导入到一个继承自另一个模块的模块中。在这种情况下，您有两种选择：

  • 让FormsModule从两个模块导入到导入数组中：module1和module2。规则：导入模块不不提供对其导入模块的访问。（导入不被继承）

    在此输入图片描述

  • 在module1的导入和导出数组中声明FormsModul，以便在mod2中也能看到它

    在此输入图片描述

  1. （在某些版本中我遇到了这个问题）您正确导入了FormsModul，但问题出在输入的超文本标记语言上。您必须为输入添加名称标记属性，并且[（ngModel）]中的对象绑定名称必须与姓名属性中的名称相同

    在此输入图片描述

小开

我正在使用Angular 7。

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

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

您需要导入表单模块

打开app.module.ts

并添加行

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

和

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

如果此组件位于根组件中，则需要在root模块中导入模块名称，即app.module.ts

请打开app.module.ts

从@刘宇森导入模块名称

例如：

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

和

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

在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 { }
小开

最近我发现错误不仅发生在您忘记在模块中导入FormsModul的情况下。在我的情况下，问题出在以下代码中：

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

我用更改表单名称->姓名修复它

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

有时，即使我们已经导入了BrowserModule、FormsModule和其他相关模块，我们仍然可能得到相同的错误。

然后我意识到我们需要按顺序导入它们，这在我的例子中是遗漏的。所以顺序应该是BrowserModule、FormsModule和ReactiveFormsModule。

根据我的理解，功能模块应该遵循Angular的基本模块。

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 {}
小开

ngModel是FormsModule的一部分。它应该从@角/形式导入以使用ngModel。

请更改app.module.ts如下：

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

我在运行Angular测试时也遇到了同样的错误，因为FormsModule没有添加到规范文件中。

我们需要将其添加到所有规范文件中，而为了使应用程序成功运行，我们将在app.module.ts文件中的一个位置添加它。

小开

在您要使用[（ngModel）]的那些模块中导入FormsModule

在此处输入图片描述

小开

YouTube视频"角错误不能绑定到'ngModel'，因为它不是输入的已知属性解释了如何实际解决这个问题。下面是相同的文本解释。

角错误"无法绑定到'ngModel'，因为它不是已知属性“输入”

上述错误消息的简单翻译是“ngModel”指令不被理解，需要加载必要的Angular模块才能使语法正常工作。

为了使“ngModel”指令在超文本标记语言中工作，我们需要从“@Angular/form”导入“FormModules”。下面是另一种类似的错误，但与“FormsGroup”相关。在下面的情况下，我们应该加载ReactiveFormsModul。

模板解析错误：无法绑定到'formGroup'，因为它不是已知的“形式”的属性。

一个小提示，当你得到一个错误，如上所述：你可以寻找“[错误-->]”文本，箭头指向Angular不理解的指令。

在此输入图片描述

小开

虽然答案解决了这个问题，但我想提供更多关于这个主题的信息，因为当我开始从事Angular项目时，我也经历过这个问题。

初学者应该明白有两种主要类型的表单。它们是响应式表单和模板驱动的表单。从角2开始，建议对任何类型的表单使用反应形式。

响应式表单更健壮：它们更具可扩展性、可重用性和可测试性。如果表单是应用程序的关键部分，或者您已经在使用响应式模式来构建应用程序，请使用响应式表单。

模板驱动的表单可用于将简单表单添加到应用程序，例如电子邮件列表注册表单。它们很容易添加到应用程序中，但它们的缩放效果不如反应式表单。如果您有非常基本的表单需求和逻辑，可以仅在模板中进行管理，请使用模板驱动的表单。

有关更多详细信息，请参阅Angular文档。

进入问题，[(ngModel)]="..."基本上是一个绑定语法。为了在组件超文本标记语言页面中使用它，您应该在开发模块（组件所在的位置）中导入模块名称。现在[(ngModel)]用于简单的双向绑定，或者在表单中用于任何输入超文本标记语言元素。

另一方面，要使用反应式表单，请从@angular/forms包中导入ReactiveFormsModule并将其添加到NgModule的导入数组中。

例如，如果我的组件超文本标记语言内容在任何超文本标记语言元素中都没有[（ngmodel）]，那么我不需要导入FormsModul。

在我下面的例子中，我已经完全使用了Reactive Forms，因此我不需要在我的NgModul中使用FormsModul。

创建模块

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { GroupsRoutingModule, routedAccountComponents } from './groups-routing.module';import { ReactiveFormsModule } from '@angular/forms';import { SharedModule } from '../shared/shared.module';import { ModalModule } from 'ngx-bootstrap';@NgModule({declarations: [routedAccountComponents],imports: [CommonModule,ReactiveFormsModule,GroupsRoutingModule,SharedModule,ModalModule.forRoot()]})export class GroupsModule {}

创建路由模块（分隔为主要代码和易读性）：

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { GroupsComponent } from './all/index.component';import { CreateGroupComponent } from './create/index.component';
const routes: Routes = [{path: '',redirectTo: 'groups',pathMatch: 'full'},{path: 'groups',component: GroupsComponent}];

@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class GroupsRoutingModule { }

export const routedAccountComponents = [GroupsComponent,CreateGroupComponent];

CreateGroupComponent html代码

<form [formGroup]="form" (ngSubmit)="onSubmit()"><label for="name">Group Name</label><div class="form-group"><div class="form-line"><input type="text" formControlName="name" class="form-control"></div></div></form>

创建组件文件

import { Component, OnInit, Output, EventEmitter } from '@angular/core';import { DialogResult } from 'src/app/shared/modal';import { FormGroup, FormControl, AbstractControl } from '@angular/forms';import { Subject } from 'rxjs';import { ToastrService } from 'ngx-toastr';import { validateAllFormFields } from 'src/app/services/validateAllFormFields';import { HttpErrorResponse } from '@angular/common/http';import { modelStateFormMapper } from 'src/app/services/shared/modelStateFormMapper';import { GroupsService } from '../groups.service';import { CreateGroup } from '../model/create-group.model';
@Component({selector: 'app-create-group',templateUrl: './index.component.html',providers: [LoadingService]})
export class CreateGroupComponent implements OnInit {public form: FormGroup;public errors: string[] = [];private destroy: Subject<void> = new Subject<void>();
constructor(private groupService: GroupsService,private toastr: ToastrService) { }
private buildForm(): FormGroup {return new FormGroup({name: new FormControl('', [Validators.maxLength(254)])});}
private getModel(): CreateGroup {const formValue = this.form.value;return <CreateGroup>{name: formValue.name};}
public control(name: string): AbstractControl {return this.form.get(name);}
public ngOnInit() {this.form = this.buildForm();}

public onSubmit(): void {
if (this.form.valid) {// this.onSubmit();//do what you need to do}}}

我希望这能帮助开发人员了解为什么以及何时需要使用模块名称。

小开

在文件app.module中导入表单模块

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

即使在功能模块中直接或间接（例如从共享模块）导入FormsModule，如果导入的组件没有在declarations上声明，也会发生此错误：

在此输入图片描述

我跟随Deborah Kurata的Angular Routing课程。当我在Angular Route的component属性上添加导入的组件产品编辑信息组件时，我忘记在declarations属性上添加ProductEditInfoComponent。

在声明属性上添加ProductEditInfoComponent将解决NG8002：无法绑定到“ngModel”，因为它不是“输入”的已知属性。问题：

在此输入图片描述

小开

ngModel应该从@刘宇森导入，因为它是FormsModule的一部分。所以我建议您更改app.module.ts，如下所示：

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

注意：请记住，ngModel指令被定义为Angular FormsModul的一部分，您需要在Angular模块元数据的导入：[…]部分中包含FormsModul，您希望在其中使用它。

小开

对我来说，问题是，我忘记在模块的声明数组中声明组件。

@NgModule({declarations: [yourcomponentName]})
小开 

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

小开

我遇到了同样的问题，原因是我在我的MenuComponent中使用了ngModel。我导入了我的MenuComponent in app.module.ts，但我忘了声明它。

Error

声明MenuComponent解决了我的问题。即，如下图所示：

已解决的问题

小开

我正在使用Angular 9，我有一个带有[formGroup]属性的“

我通过只删除那个（ngModel）部分来解决错误。

小开

此错误的主要原因是您忘记在app.module.ts.中导入FormsModul

但有时在大型项目中，您可能会忘记在其模块中添加您的组件并遇到此错误。

小开

在Angular中使用双向绑定之前，您需要将模块名称包导入您的模块。

您可以通过将FormsModule添加到模块内的导入数组（例如app.module.ts）来做到这一点。

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

实际上在大多数情况下，FormsModule已经被导入了。所以你要做的就是确保

  1. 您的组件已正确添加到文件中app.module.ts声明数组中。
  2. 您应该验证绑定是否拼写正确。正确的拼写是[(ngModel)]
小开

您需要导入表单模块。

#Open app.module.ts#add the lines
import { FormsModule } from '@angular/forms';and
@NgModule({imports: [FormsModule   <--------add this],})

if you are using reactive form then also added  ReactiveFormsModule
小开

要解决我们必须在app.module.ts文件中包含FormModule以避免Angular应用程序中的Can't bind to ngModel as it isn't a known property of 'input'问题。

步骤如下：

打开app.module.ts和添加导入行

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

添加FormsModule到imports

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

角形式模块添加

小开

即使我添加了如上所述的FormsModul，我也遇到了同样的错误。所以只需简单地重新启动即可完成这项工作。

小开

确保模板驱动的表单方法（https://angular.io/guide/forms），正如@Nikita Sychou已经提到的，您已经用“name”属性装饰了输入字段，例如

<form><input [(ngModel)]="form.email" name="email"></input>

并且FormsModul已在关联的@NgModul中导入。两者都是避免“无法绑定到ngModel”错误的先决条件。如果你在IDE中仍然收到样式错误，例如IntelliJ抱怨ngModel指令，只需忽略它们。.你可以走了：-）

小开

您需要在app.module.ts中导入FormsModule并添加行

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

FormsModule中声明的ngModel指令允许您将模板驱动表单中的控件绑定到数据模型中的属性。当您使用双向数据绑定语法[（ngModel）]包含指令时，Angular可以跟踪控件的值和用户交互，并保持视图与模型同步。

小开

确保[（ngModel）]实际上与Capital M拼写为“ngModel”.我因为没有看到这个而失去了一些时间

小开

结合所有可能的解决方案：

  1. 检查你的输入是否正确。它应该是“[（ngModel）]”，大写为“M”。
  2. 检查你的TS文件中是否有导入FormsModule。如果没有，你可以这样做：

在app.module.ts中，添加这些行

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

提交答案