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

You need to import the FormsModule

Open app.module.ts

and add line

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

and

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

Answer 2

ngModel is coming from FormsModule.There are some cases when you can receive this kind of error:

1. You didn't import the FormsModule into import array of module where your component is declared, component in which the ngModel is used.
2. You have import the FormsModule into one module which is inherited of another module. In this case you have two options:
   • let the FormsModule imported into the import array from both modules:module1 and module2. As rule: Importing a module does NOT provide access to its imported modules.(Imports are not inherited)

• declare the FormsModule into the import and export arrays in module1 to be abble to see it in model2 also

3. (In some version I faced this problem) You have imported correctly the FormsModule but the problem is on the input HTML tag. You must add the name tag attribute for input and the object bound name in [(ngModel)] must be the same as the name into the name attribute

   

Answer 3

Throwing in this might help someone.

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

If you'll be using the FormsModule ONLY in the AuthModule then you wouldn't need to import the FormModule IN the default AppModule

So something like this in the 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 AppModule if you don't use the FormsModule anywhere else.

Answer 4

If someone is still getting errors after applying the accepted solution, it could be possibly because you have a separate module file for the component in which you want to use the ngModel property in input tag. In that case, apply the accepted solution in the component's module.ts file as well.

Answer 5

When I first did the tutorial, main.ts looked slightly different from what it is now. It looks very similar, but note the differences (the top one is correct).

Correct:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Old tutorial code:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Answer 6

In the module you are willing to use ngModel you have to import FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }