392

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

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

我该如何解决这个问题？

4

22 回答 22

840

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

编辑

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

有两个可能的原因

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

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

@NgModule({
    imports: [
        FormsModule      
    ]

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

于 2017-04-08T17:11:51.340 回答
30

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

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

于 2018-08-26T13:40:12.303 回答
15

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

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

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
于 2018-07-12T09:29:22.117 回答
12

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

于 2019-02-25T10:57:47.830 回答
10

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

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));
于 2018-08-26T03:52:22.413 回答
6

在app.module.ts添加这个：

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
于 2017-08-23T08:12:16.933 回答
3

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

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

于 2019-03-12T03:27:34.790 回答
3

在此处输入图像描述我尝试了上面提到的所有东西，但仍然无法正常工作。

但最后我在 Angular 站点中发现了问题。尝试在 module.ts 中导入 formModule 就是这样。在此处输入图像描述

于 2019-07-03T09:29:29.153 回答
3

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    
@NgModule({
    imports: [
         FormsModule,
         ReactiveFormsModule      
    ]
})
于 2020-09-19T22:52:35.950 回答
2

尝试添加

模块级别的 ngModel

代码和上面一样

于 2018-08-08T11:18:20.757 回答
2

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

一个简单的演示来证明这个案例。

于 2019-01-15T11:41:21.097 回答
2

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

于 2019-01-19T09:57:38.720 回答
2

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

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
于 2019-02-13T12:57:26.113 回答
2

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

在 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

于 2020-04-09T14:13:05.817 回答
2

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

请注意，它可以通过延迟加载AppModule或特性模块延迟加载。

imports: [
   ...,
   FormsModule,
   ...
]
于 2020-11-22T19:02:28.763 回答
1

在 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">
于 2018-10-02T05:30:07.497 回答
1

import { FormsModule } from '@angular/forms'; //<<<< 在这里导入

BrowserModule, FormsModule//<<<< 在这里

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

于 2018-12-25T09:57:37.007 回答
1

就我而言，我拼错了，我指的是 ngmodel 而不是 ng Model :)希望它有帮助！

预期 - [(ngModel)] 实际 - [(ngmodel)]

于 2019-12-25T07:40:44.500 回答
1

在角度 7 中，您必须导入“ReactiveFormsModule”。

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

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

于 2020-06-26T07:13:51.777 回答
0

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML 代码：

<input type='text' [(ngModel)] ="usertext" />
于 2019-03-22T06:49:37.267 回答
0

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

于 2020-05-22T18:33:09.807 回答
0

就我而言，在我的应用程序的延迟加载转换期间，我错误地导入了RoutingModule而不是我的ComponentModule内部app-routing.module.ts

于 2020-09-29T17:41:17.943 回答