Angular错误:&quot不能绑定到'ngModel'因为它不是't 'input'"

我使用的是Angular 4，我在控制台得到了一个错误:

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

我该如何解决这个问题?

487209 次浏览
小开
最佳答案

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

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


@NgModule({
imports: [
FormsModule
]

编辑

因为有很多相同问题的重复问题，我正在加强这个答案。

有两个可能的原因

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

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


@NgModule({
imports: [
FormsModule
]

  • Check the syntax/spelling of [(ngModel)] in the input tag

小开

在app.module.ts中添加这个:

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


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

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

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

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


@NgModule({


imports: [ FormsModule ],       // HERE


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

尝试添加

模块级的ngModel

代码与上面的相同

小开

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

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));
小开
这是一个正确答案。 你需要导入'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 { }
< p > * * 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.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">
小开

使用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
...
})

一个简单的演示来证明这种情况。

小开

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

小开

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

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

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


[...]


@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
小开
上面提到的解决这个问题的方法都是正确的。 但是如果你使用的是惰性加载，FormsModule就需要在子模块中导入，因为子模块中有表单。在app.module.ts中添加它不会有帮助
小开

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

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

小开

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

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


@NgModule({
imports: [
FormsModule
];

HTML代码:

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

enter image description hereI尝试了上面提到的所有事情，但它仍然不工作。

但最后我在Angular站点上发现了这个问题。尝试在module中导入formModule。就是这样。enter image description here

小开

在我的情况下，我拼写错误，我是指ngmodel而不是ng米odel:)希望它有帮助!

Expected - [(ngModel)] Actual - [(ngmodel)]

小开

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

在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中都得到了验证

小开

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

小开

在angular 7中，你必须导入“reactiveformsmodule”。

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

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

小开

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

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

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

在我的例子中，在应用程序的惰性加载转换期间，我错误地导入了RoutingModule而不是app-routing.module.ts中的ComponentModule

小开

在你的NgModule导入中添加FormsModule(因此ngModel是FormsModule的一部分)。

请注意它可以是AppModule或功能模块通过惰性加载加载。

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

提交答案