🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

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

I have the accompanying mistake when dispatching my Angular application, regardless of whether the part isn't shown.

I need to remark out the <input> so that my application 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 taking a gander at the Hero plunker, yet I don't perceive any distinction from my code.

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

}
input angular javascript
by

2 Answers

kshitijrana14
Yes, that's it. In the app.module.ts file, I just added:
import { FormsModule } from '@angular/forms';



[...]



@NgModule({

  imports: [

    [...]

    FormsModule

  ],

  [...]

})
MounikaDasa
For using [(ngModel)] in Angular 2, 4 & 5+, you need to import FormsModule from Angular form...

Also, it is in this path under forms in the Angular repository on GitHub:

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

Probably this is not a very pleasurable for the AngularJS developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you'd like you to want to use at the time, ngModel is in FormsModule now.

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

So simply look for app.module.ts and make sure you have FormsModule imported in...

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, these are the current starting comments for Angular4 ngModel in FormsModule:

/*
* `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 ngModelOptions and make standalone true...

[ngModelOptions]="{standalone: true}"

Login / Signup to Answer the Question.

LoginSignup