角度错误：“无法绑定到'ngModel'，因为它不是'input'的已知属性”

Question

我正在使用Angular 4，我在控制台中收到错误：

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

我该如何解决这个问题？

Answer 1

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

---

编辑

由于有很多重复的问题都有同样的问题，我正在加强这个答案。

有两个可能的原因

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

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

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

Answer 2

I尝试了上面提到的所有事情，但它仍然无法正常工作。

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

Answer 3

import { FormsModule } from '@angular/forms'; // <<<<在这里导入它

BrowserModule, FormsModule // <<<<和这里

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

Answer 4

在我的情况下，我添加了缺少的导入，这是ReactiveFormsModule。

Answer 5

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

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

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

[...]

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

Answer 6

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

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

Answer 7

您需要添加这些导入：

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

Answer 8

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML代码：

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

Answer 9

答案如下： -

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

@ngModule({
   imports:[FormsModule];

})

Answer 10

这是一个正确的答案。你需要导入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();
  }));

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

Answer 11

你的ngModel不起作用，因为它还不是你的NgModule的一部分。

你必须告诉NgModule你有权在你的应用程序中使用ngModel，你可以通过将FormsModule添加到你的app.module.ts - > imports-> []来实现。

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Answer 12

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

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

Answer 13

在app.module.ts中添加：

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

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

Answer 14

尝试添加

模块级别的ngModel

代码与上面的代码相同

Answer 15

使用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来证明这种情况。

Answer 16

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

Answer 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">