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

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

我该如何解决这个问题?


当前回答

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

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .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">

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

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

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

注意,它可以是AppModule,也可以是通过惰性加载加载的特性模块。

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

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

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

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

[...]

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

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