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

Can't bind to 'ngModel' since it isn't a known property of 'input'

提问by Anthony Brenelière

I've got the following error when launching my Angular app, even if the component is not displayed.

启动我的 Angular 应用程序时出现以下错误，即使该组件未显示。

I have to comment out the <input>so that my app works.

我必须注释掉<input>以便我的应用程序正常工作。

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

I'm looking at the Hero plunker, but I don't see any difference from my code.

我正在查看 Hero plunker，但我看不出与我的代码有任何区别。

Here is the component file:

这是组件文件：

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

回答by Anthony Brenelière

Yes that's it, in the app.module.ts, I just added :

是的，就是这样，在 app.module.ts 中，我刚刚添加了：

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

[...]

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

回答by Gabriele Ciech

In order to be able to use two-way data binding for form inputs you need to import theFormsModulepackage in your Angularmodule. For more info see the Angular 2official tutorial hereand the official documentation for forms

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

回答by Alireza

For using [(ngModel)]in Angular 2, 4& 5+, You need to import FormsModulefrom Angular form...

对于使用[(ngModel)]在角2，4＆5+，你需要进口FormsModule从角形态...

Also it is in this path under forms in Angular repoin github:

它也位于github中Angular repo表单下的这条路径中：

angular / packages / forms / src / directives / ng_model.ts

角度/包/表单/src/指令/ng_model.ts

Probably this is not a very pleasure for the AngularJs developersas you could use ng-modeleverywhere anytime before, but as Angular tries to separate modules to use whatever you'd like you to want to use at the time, ngModelis in FormsModulenow.

也许这不是一个非常高兴的AngularJs开发者，你可以使用NG-模型之前的任何时间无处不在，但作为角试图单独的模块来使用任何你想你想的时候使用，ngModel是FormsModule现在.

Also if you are using ReactiveFormsModule,needs to import it too.

此外，如果您使用的是ReactiveFormsModule，也需要导入它。

So simply looks for app.module.tsand make sure you have FormsModuleimported in...

所以只需查找app.module.ts并确保您已FormsModule导入...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Also this is the current starting comments for Angular4 ngModelin FormsModule:

这也是 FormsModulengModel中Angular4的当前起始注释：

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

If you'd like to use your input, not in a form, you can use it with ngModelOptionsand make standalone true...

如果您想使用您的输入，而不是在表单中，您可以使用它ngModelOptions并使独立真实...

[ngModelOptions]="{standalone: true}"

For more info, Look at ng_modelin Angular section here

有关更多信息，请在此处查看Angular 部分中的ng_model

回答by PRao

You need to import the FormsModule

您需要导入 FormsModule

Open app.module.ts

打开app.module.ts

and add line

并添加行

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

and

和

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

回答by KhoPhi

Throwing in this might help someone.

扔在这可能会帮助某人。

Assuming you have created a new NgModule, say AuthModulededicated to handling your Auth needs, make sure to import FormsModulein that AuthModule too.

假设你已经创建了一个新的NgModule，说AuthModule专门处理您的验证需求，确保进口FormsModule在AuthModule过。

If you'll be using the FormsModuleONLY in the AuthModulethen you wouldn't need to import the FormModuleIN the default AppModule

如果您将在中使用FormsModuleONLYAuthModule那么您将不需要导入FormModule默认的INAppModule

So something like this in the AuthModule:

所以像这样的事情AuthModule：

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Then forget about importing in AppModuleif you don't use the FormsModuleanywhere else.

AppModule如果您不使用FormsModule其他任何地方，则忘记导入。

回答by Shashwat Gupta

Simple Soultion :In app.module.ts

简单的解决方案：在 app.module.ts 中

Example 1

示例 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Example 2

示例 2

If you want to use [(ngModel)] then you have to import FormsModule in app.module.ts

如果你想使用 [(ngModel)] 那么你必须在 app.module.ts 中导入 FormsModule

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

回答by Arul

Import the FormsModule in those modules where you want to use the [(ngModel)]

在要使用 [(ngModel)] 的那些模块中导入 FormsModule

回答by debugmode

There are two steps you need to follow to get rid of this error

您需要遵循两个步骤来消除此错误

1. import FormsModule in your app module
2. Pass it as value of imports in @NgModule decorator

1. 在您的应用模块中导入 FormsModule
2. 将其作为 @NgModule 装饰器中的导入值传递

basically app.module.ts should look like below :

基本上 app.module.ts 应该如下所示：

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Hope it helps

希望能帮助到你

回答by WapShivam

You need to import FormsModulein your rootmodule if this component is in the root i.e. app.module.ts

您需要导入FormsModule您在根模块如果此组件是根，即app.module.ts

Kindly open app.module.ts

请打开 app.module.ts

Import FormsModulefrom @angular/forms

从@angular/forms导入FormsModule

Ex:

前任：

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

and

和

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

回答by Ved_Code_it

I am using Angular 7

我正在使用 Angular 7

I have to import ReactiveFormsModule because I am using FormBuilder class to create reactive form.

我必须导入 ReactiveFormsModule 因为我使用 FormBuilder 类来创建反应式表单。

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

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