Angular 4 - "无法绑定到'ngModel',因为它不是'input'的已知属性"错误

Question

我正在使用Angular 4,我在控制台中收到错误:

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

我该如何解决这个问题？

Answer 1

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

编辑

由于有很多重复的问题都有同样的问题,我正在加强这个答案.

有两个可能的原因

• 丢失FormsModule,因此将此添加到您的模块,

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

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

Answer 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();
  }));

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

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

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

Answer 5

在app.module.ts添加这个：

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

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

Answer 6

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

请注意，它可以通过延迟加载来延迟加载AppModule或功能模块。

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

Answer 7

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

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

Answer 8

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

在 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

Answer 9

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

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