Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Question

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

Can't bind to 'ngModel' since it isn't a known property of 'input'

我该如何解决？

Answer 1

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

编辑

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

有两个可能的原因

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

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

@NgModule({
    imports: [
        FormsModule      
    ]

检查输入标签中[(ngModel)]的syntax/spelling

Answer 2

在 app.module.ts 中添加：

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

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

Answer 3

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

您必须告诉 NgModule 您有权在整个应用程序中使用 ngModel，您可以将 FormsModule 添加到 app.module.ts -> imports -> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Answer 4

尝试添加

ngModel in module level

代码同上

Answer 5

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

中导入 FormsModule

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

Answer 6

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

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

Answer 8

使用 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 9

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

Answer 10

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

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

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

[...]

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

Answer 11

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

Answer 12

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

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

Answer 13

首先导入 FormsModule，然后在 component.ts

中使用 ngModel

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML代码：

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

Answer 14

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

但最后我在 Angular site.Try 中找到了在 module.ts 中导入 formModule 的问题，仅此而已。

Answer 15

在我的例子中我拼错了，我指的是 ngmodel 而不是 ngModel :) 希望它有帮助！

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

Answer 16

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

In html the ngModel should be called this way. There is no dependency on other attribute of the input element

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

Make Sure FormsModule is imported into the modules file 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 { }

Make sure the component in which you are trying to use ngModel for two way binding is added in the declarations of the. Code added in the previous point #2

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

Answer 17

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

Answer 18

在angular7中，你必须导入“ReactiveFormsModule”。

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

我解决了这个问题 import.It 会帮助你。

Answer 19

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

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

Answer 20

就我而言，在 lazy-loading 转换我的应用程序期间，我在 app-routing.module.ts

中错误地导入了 RoutingModule 而不是我的 ComponentModule

Answer 21

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

Note it can be AppModule or feature module loaded lazily via lazy loading.

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

Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Angular error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

typescript

angular-ngmodel

angular

angular-forms