Question

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

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

我该如何解决这个问题？

Answer 1

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

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

@NgModule({
    imports: [
         FormsModule      
    ]

修改

由于存在许多同样问题的重复问题，我正在加强这个答案。

有两个可能的原因

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

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

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

Answer 2

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

首先在app.module.ts

**

print(h_t1)

** 在app.component.spec.ts中排名第二

print(intermediate_output[0][127])

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

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

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

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

Answer 5

在app.module.ts中添加：

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

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

Answer 6

尝试添加

ngModel在模块级别

代码与上面的

Answer 7

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

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

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

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

Answer 9

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

Answer 10

花了几个小时解决这个问题后，找到了解决方法here

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

Answer 11

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

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

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来证明这种情况。

Answer 12

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

Answer 13

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

Answer 14

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

rlang::last_error()

我已通过导入解决了此问题。它将为您提供帮助。

Answer 15

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

Answer 16

在我拼错的情况下，我指的是ngmodel而不是ng M odel ：）希望对您有所帮助！

预期-[（ngModel）] 实际-[（ngmodel）]

Answer 17

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

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

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

Answer 18

您需要添加以下导入：

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

Answer 19

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

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML代码：

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

Answer 20

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

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

Answer 21

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

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

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

[...]

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

Answer 22

就我而言，我添加了丢失的导入内容，即ReactiveFormsModule。

Answer 23

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

BrowserModule, FormsModule // <<<<和此处

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

Answer 24

答案如下：-

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

@ngModule({
   imports:[FormsModule];

})

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

24 个答案: