角度错误：“无法绑定到‘ngModel’，因为它不是‘输入’的已知属性”答案

【问题标题】：Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"角度错误：“无法绑定到‘ngModel’，因为它不是‘输入’的已知属性”
【发布时间】：2017-09-04 00:17:44
【问题描述】：

我正在使用 Angular 4，但在控制台中出现错误：

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

我该如何解决这个问题？

【问题讨论】：

您需要将FormsModule添加到您使用ngModel的模块的imports: []。否则发布您的代码。
我无法想到所有新的 Angular 2 和 4 开发人员会遇到这个确切的问题（包括我自己）。你最后一次使用 Angular 并且不想想在某处使用 ngModel 是什么时候？我不明白为什么 FormsModule 不只是默认包含在内....
不管怎样，我在使用表单验证时在 IONIC-4 ( 4.11.0 ) 中遇到了这个错误。如果除了将 formControlName="myControl" 添加到表单中任何位置的任何之外什么都不做，我会收到 ngModel 绑定错误消息。备用属性，例如 formControlName1="myControl" 不会导致此错误。
Can't bind to 'ngModel' since it isn't a known property of 'input'的可能重复

标签： angular typescript angular-ngmodel angular-forms

【解决方案1】：

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

编辑

由于同一个问题有很多重复的问题，我正在改进这个答案。

有两个可能的原因

缺少 FormsModule，因此将其添加到您的模块中，

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

@NgModule({
    imports: [
        FormsModule      
    ]

检查输入标签中[(ngModel)]的语法/拼写

【讨论】：

ngModel 和 FormsModule 是什么关系？但是，这对我不起作用。
FormsModule 为表单的元素提供了额外的指令，包括输入、选择等。这就是为什么它是必需的。不要忘记在声明包含表单元素绑定的组件的同一模块中导入 FormsModule。
如果我们在组件 ts 文件中使用这个怎么办？
你不应该在 component.ts 中导入
@Sajeetharan 如果我的组件中有一个在某些表单元素中使用 ng-model 的模板怎么办？

【解决方案2】：

这是一个正确的答案。你需要导入'FormsModule'

app.module.ts 中的第一个

**

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

** app.component.spec.ts 中的第二个

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

最好的问候和希望会有所帮助。

【讨论】：

第二步，修改app.component.ts有必要吗？

【解决方案3】：

您的 ngModel 不工作，因为它还不是您的 NgModule 的一部分。

您必须告诉 NgModule 您有权在整个应用程序中使用 ngModel，您可以通过添加 FormsModule 来做到这一点 进入你的 app.module.ts -> imports-> []。

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

【讨论】：

好吧，这取决于：如果您的 Angular 应用程序不仅仅包含根应用程序模块，您可能只想在选定的模块中导入 FormsModule。

【解决方案4】：

上述所有问题的解决方案都是正确的。但是如果您使用延迟加载，则需要将FormsModule 导入到其中包含表单的子模块中。将其添加到 app.module.ts 将无济于事。

【讨论】：

【解决方案5】：

我在使用 Karma/Jasmine 测试我的 Angular 6 应用程序时遇到了这个错误。我已经在我的顶级模块中导入了FormsModule。但是当我添加一个使用[(ngModel)] 的新组件时，我的测试开始失败。在这种情况下，我需要在我的TestBed TestingModule 中导入FormsModule。

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));

【讨论】：

【解决方案6】：

在app.module.ts 中添加：

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

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

【讨论】：

这个答案对现有答案有什么附加价值？
没有在答案中添加任何值，并且代码的格式错误。让初学者感到困惑。
虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案7】：

我的答案是ngModel 的拼写错误。我把它写成这样：ngModule，而它应该是ngModel。

所有其他尝试显然都无法为我解决错误。

【讨论】：

是的，这也发生在我身上... Model != Module 为什么我的脑子里没有！

【解决方案8】：

我尝试了上面提到的所有方法，但仍然无法正常工作。

但最后我在 Angular 站点中找到了问题。尝试在 module.ts 中导入 formModule 就可以了。

【讨论】：

【解决方案9】：

在这个问题上花了几个小时找到了解决方案here

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

【讨论】：

【解决方案10】：

尝试添加

模块级别的ngModel

代码同上

【讨论】：

【解决方案11】：

使用 Angular 7.x.x 更新，在我的一个模块中遇到同样的问题。

如果它位于您的独立模块中，请添加这些额外的模块：

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

如果它位于您的 app.module.ts 中，请添加以下模块：

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

一个简单的demo 来证明这一点。

【讨论】：

【解决方案12】：

在我的例子中，我添加了缺少的导入，即 ReactiveFormsModule。

【讨论】：

【解决方案13】：

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

在 app.module.ts 中添加以下行：

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

[...]

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

【讨论】：

【解决方案14】：

如果双向绑定不起作用，您应该验证以下内容。

在 html 中应该这样调用 ngModel。 不依赖输入元素的其他属性

<input [(ngModel)]="inputText">

确保 FormsModule 被导入到模块文件app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

确保您尝试使用 ngModel 进行双向绑定的组件已添加到 . 上一点#2中添加的代码

这是使用 ngModel 进行双向绑定所需要做的一切，这已验证到 angular 9

【讨论】：

就我而言，我没有添加 HomeComponent。谢谢。

【解决方案15】：

在您的 NgModule 导入中添加 FormsModule（因此 ngModel 是 FormsModule 的一部分）。

注意可以是AppModule或者功能模块通过延迟加载来延迟加载。

imports: [
   ...,
   FormsModule,
   ...
]

【讨论】：

【解决方案16】：

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

BrowserModule, FormsModule //

所以只需查找app.module.ts 或其他模块文件，并确保您已将FormsModule 导入...

【讨论】：

【解决方案17】：

在 app.module.ts 中导入表单模块。

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在html中：

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

【讨论】：

我在 html 中使用了表单，并在 app.madule.ts 中导入了表单模块，例如从 '@angular/forms' 导入 { FormsModule}，并在导入中添加该 FormsModule。

【解决方案18】：

在我的情况下，我拼错了，我指的是 ngmodel 而不是 ngModel :) 希望它有所帮助！

预期 - [(ngModel)] 实际 - [(ngmodel)]

【讨论】：

【解决方案19】：

在 Angular 7 中，您必须导入“ReactiveFormsModule”。

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

我通过这个导入解决了这个问题。它会帮助你。

【讨论】：

由于某种奇怪的原因，它只适用于 ReactiveFormsModule 而没有 FormsModule (angular 13)

【解决方案20】：

首先导入 FormsModule，然后在你的 component.ts 中使用 ngModel

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML 代码：

<input type='text' [(ngModel)] ="usertext" />

【讨论】：

【解决方案21】：

如果即使在导入表单模块后问题仍然存在，请检查您的输入没有与页面上另一个输入值相等的“名称”属性。

【讨论】：

【解决方案22】：

在我的情况下，在我的应用程序的延迟加载转换期间，我错误地在 app-routing.module.ts 中导入了 RoutingModule 而不是我的 ComponentModule

【讨论】：