Can't bind to 'ngModel' since it isn&#

Question

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

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

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.

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";
}

Answer 1

For any version from Angular 2, you need to import FormsModule in your app.module.ts file and it will fix the issue.

Answer 2

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

In order to be able to use two-way data binding for form inputs you need to import theFormsModule package in your Angular module. For more info see the Angular 2 official tutorial here and the official documentation for forms

Answer 4

if you are still getting the error after importing FormsModule correctly then check in your terminal or (windows console) because your project is not compiling (because of another error that could be anything) and your solution has not been reflected in your browser!

In my case, my console had the following unrelated error: Property 'retrieveGithubUser' does not exist on type 'ApiService'.

Answer 5

For my scenario, I had to import both [CommonModule] and [FormsModule] to my module

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

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

Answer 6

If you need to use [(ngModel)] first do you need to import FormsModule in app.module.ts and then add in a list of imports. Something like this:

app.module.ts

1. import import {FormsModule} from "@angular/forms";
2. add in imports imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Example: <input type="text" [(ngModel)]="name" >
2. and then <h1>your name is: {{name}} </h1>