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

Question

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

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

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

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

这是 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";
}

- Anthony Brenelière

---

自从昨天更新到rc5后，我一直遇到同样的问题（有趣的是这对我的同事有效...）。我认为@abreneliere在谈论他们的教程- https://angular.io/docs/ts/latest/tutorial/。 - PetLahev

是的，我提到了英雄之旅教程，因为它使用了ngModel。 - Anthony Brenelière

我刚开始学习Angular，在做“英雄之旅”教程时看到了这个错误。果然，在下一行他们指出了这个错误，并告诉你如何/为什么进行更正。 - Matt Penner

它也使用相同的修复方法来处理文本区域。 - Jun

@MattPenner的评论应该是答案。 - Chiwda

Answer 1

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

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

[...]

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

- Anthony Brenelière

---

实际上，我更喜欢这个答案而不是Gabriele的答案（只是一个链接）。这里呈现了确切的代码。令人烦恼的是，我在跟随John Paps在PluralSight上的“Angular 2入门”时遇到了这个问题，但这个问题甚至没有被提到。对于他们来说，双向绑定就是起作用的。 - Mike Gledhill

这个方法是可行的，但只有在我将其导入到我的子模块后才有效。对于初学者来说，这并不完全清楚，它并不会被子模块继承。 - adam0101

在我的情况下，我使用的括号有误。我使用了[{ngModel}]而不是正确的形式：[(ngModel)]。 - Imtiaz

对于那些因Jasmine类似故障而找到这篇文章的人，你还需要在component.spec.ts文件中添加这些导入。 - theMayer

关于将其放置在哪里（关于Jasmine错误）：https://dev59.com/H1kS5IYBdhLWcg3wp4Qi - bagsmode

Answer 2

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

- Gabriele Ciech

---

我必须承认，我从上周一（也就是四天前）开始学习Angular并且正在做他们的教程，所以我相信我做错了些什么，但是对我来说导入FormsModule没有起作用。然后我添加了 import { FORM_DIRECTIVES } from '@angular/forms'; ，并将 FORM_DIRECTIVES 添加到指令中，是的，我的绑定又可以工作了（需要说明的是，在rc5发布之前，我的绑定已经可以工作了）。 - PetLahev

似乎与这个有关：https://dev59.com/TFwZ5IYBdhLWcg3wTOsu - PetLahev

@PetLahev，你在教程中遇到的问题是因为你在8月7日开始学习时教程使用的是第4版的预发布版本。但截至8月8日，已经更新到了第5版，其语法有所不同。 - AJ Zane

导入了Angular Forms和FORM_DIRECTIVES让我受益匪浅.. :) - Basit Munir

FORM_DIRECTIVES 已经废弃了，以防万一。 - Toolkit

值得注意的是，如果你正在使用 SharedModule，你可能也需要在那里导入 FormsModule。 - Difinity

Answer 3

对于在Angular 2，4和5+中使用[(ngModel)]，您需要从Angular表单中导入FormsModule。路径在GitHub上的Angular repository中的forms下：

angular / packages / forms / src / directives / ng_model.ts

如果您正在使用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 { }

此外，这是目前在FormsModule中启用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并将standalone设置为true...

[ngModelOptions]="{standalone: true}"

欲了解更多信息，请参见Angular部分中的ng_model，此处。

- Alireza

Answer 4

你需要导入FormsModule模块。

打开app.module.ts文件并添加以下行：

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

和

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

- PRao

---

这个答案与2016年的答案没有任何额外的价值： [答案＃1]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38894463），[答案＃2]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38896469），[答案＃3]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#39676661） - Martin Schneider

Answer 5

为了解决Angular应用程序中的“Can't bind to ngModel as it isn't a known property of the input”问题，我们必须在app.module.ts文件中包含FormModule。以下是步骤：

打开app.module.ts并添加导入行。

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

并且在 imports 中 添加 FormsModule

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

图1.0 (app.module.ts 文件)

- Tharindu Lakshan

---

需要导入 FormsModule 才能实现100%的功能。这对我来说解决了问题。 - Sebastian Scholle

这个答案与2016年的答案没有任何额外的价值： [答案＃1]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38894463），[答案＃2]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38896469），[答案＃3]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#39676661） - Martin Schneider

导入模拟版本就足够了：MockModule(FormsModule) - gsziszi

Answer 6

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

如果您仅在AuthModule中使用FormsModule，则不需要在默认的AppModule中导入FormModule。

因此，在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 中导入它。

- KhoPhi

---

我需要它在子模块中，我正在使用表单功能。在更高的层次上是不够的。 - Zarepheth

Answer 7

在想要使用[(ngModel)]的模块中导入FormsModule。

- Arul

---

这个答案与2016年的答案没有任何额外的价值： [答案＃1]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38894463），[答案＃2]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38896469），[答案＃3]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#39676661） - Martin Schneider

@MartinSchneider 那么它是如何获得这些赞的呢 :) - Arul

我的猜测是：SO的默认设计显示最近和热门答案在更老的答案之上，而且大多数用户都比较懒散 ;) - Martin Schneider

这个是否有效？如果是的话，请关闭主题 :) @MartinSchneider - Arul

Answer 8

简单解决方案：在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 { }

- Shashwat Gupta

---

这两个例子有什么不同之处？ - Philipp Meissner

在我的情况下，我不得不在组件.module.ts中导入FormsModule。 - ISFO

这个答案与2016年的答案没有任何额外的价值： [答案＃1]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38894463），[答案＃2]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#38896469），[答案＃3]（https://dev59.com/AlkT5IYBdhLWcg3wPdGU#39676661） - Martin Schneider

Answer 9

为了消除这个错误，您需要遵循以下两个步骤：

1. 在您的应用程序模块中导入FormsModule
2. 将其作为@ NgModule装饰器中imports的值传递

基本上，文件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 { }

- debugmode

---

谢谢！我没有在导入部分声明它，当我将组件移动到子模块时，这让我疯狂。 - Richard

Answer 10

有时候，即使我们已经导入了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 {}

- Ganesh

---

你的导入数组中有ReactiveFormsModule，但没有在imports中导入，只是说一下。 - Daniel Methner

有没有一种方法可以找出顺序？也就是说，如果我们还有几个模块要导入，如何确认顺序呢？ - MortimerCat

据我理解，功能模块应该遵循 Angular 的基本模块。在功能模块的顺序方面，我们不需要担心，因为我们的错误原因与它们无关。 - Ganesh

2021 年报告，需要提到 FormsModule 必须在 NgModule 之后导入。否则将出现此错误。这个答案是唯一一个提到顺序重要性的答案！ - Obsidian Age

在使用模板驱动表单时，您不需要ReactiveFormsModule：->顺序无关紧要。 - Kieran Ryan