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

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

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

我该如何解决？

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

编辑

由于存在很多相同问题的重复问题，因此我正在增强此答案。

有两个可能的原因

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

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

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

这是一个正确的答案。您需要导入FormsMoudle

首先在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();
  }));

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

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

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

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

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

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

在app.module.ts添加此：

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

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

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

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

但最终我在Angular站点中发现了问题。尝试在module.ts中导入formModule就是这样。

尝试添加

ngModel在模块级别

代码与上面的相同

使用Angular 7.xx更新，在我的模块之一中遇到相同的问题。

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

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

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

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

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

import { FormsModule } from '@angular/forms'; // <<<<将其导入此处

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

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

就我而言，我添加了缺少的导入，即ReactiveFormsModule。

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

就我而言，我拼写错误，我指的是ngmodel而不是ng M odel ：）希望能帮上忙！

预期-[（ngModel）]实际-[[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进行双向绑定所需要做的所有工作，这已通过角度9验证。

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

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

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

[...]

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

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML代码：

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

如果即使在导入了formsmodule之后问题仍然存在，请检查您的输入是否没有“名称”属性，其值等于页面上的另一个输入。