首页 文章

Angular 4 - “可以't bind to ' ngModel ' since it isn' t 'input'的已知属性”错误

提问于
浏览 次
170

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

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

我该如何解决这个问题？

angular angular-ngmodel

14 回答

  • 1

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

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

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

    回复于
  • 0

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

    EDIT

    由于存在大量重复问题但问题相同，我正在加强这个答案 .

    有两个可能的原因

    • 缺少 FormsModule ，因此将此添加到您的模块，
    import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule      
    ]
    • 检查输入标签中 [(ngModel)] 的语法/拼写
    回复于
  • 2

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

    最诚挚的问候和希望将是有益的

    回复于
  • 1

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

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

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
    回复于
  • 0

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

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

    在 app.module.ts 中添加：

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
    回复于
  • 419

    尝试添加

    模块级别的ngModel

    代码与上面的代码相同

    回复于
  • 0
    //import form module in app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

    //In html
    <input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
    回复于
  • 5

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

    回复于
  • 2

    使用Angular 7.x.x进行更新，在我的一个 modules 中遇到同样的问题 .

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

    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来证明这一点 .

    回复于
  • 5

    在我的情况下，我添加了缺少的导入，即 ReactiveFormsModule .

    回复于
  • 10

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

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
    回复于
  • 0

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

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

    回复于
  • 0

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

    @NgModule({
    imports: [
         FormsModule  ];
<input type='text' [(ngModel)] ="usertext" />
    回复于

相关问题