Angular 4: Can't bind to 'ngModel'

Question

I have just started learning. My app.components.ts file looks like this:

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // title = 'app';
  name = '';
}

and my app.component.html is this:

  <input type="text" [(ngModel)]="name">
  <p>{{ name }}</p>

Javascript console is giving me following error:

compiler.es5.js:1689 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("et="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
  <input type="text" [ERROR ->][(ngModel)]="name">
  <p>{{ name }}</p>
</ul>
"): ng:///AppModule/AppComponent.html@18:21
    at syntaxError (http://localhost:4200/vendor.bundle.js:18052:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:29164:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:43209:39)
    at http://localhost:4200/vendor.bundle.js:43129:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:43129:19)

...

This page recommends adding FormsModule but as you can see it's not working.

https://plnkr.co/edit/tWWd0bM0HAgThbtQxSao?p=preview It is working as expected. But I found this if you are using `plain javascript` https://stackoverflow.com/a/41092752/5111904 — Matthias Herrmann, Jul 02 '17 at 21:05
Seen this error before. What angular version are you using? And can you put a plunker? — Gary, Jul 03 '17 at 03:16

score 2 · Answer 1 · edited Jul 03 '17 at 04:04

2

Are you missing the class AppModule?

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

@NgModule({
  imports:   [FormsModule ],
  //...
})
export class AppModule {} // <-- do you have this part?

edited Jul 03 '17 at 04:04

Matthias Herrmann

2,512
3
28
61

answered Jul 02 '17 at 21:19

DeborahK

52,690
10
99
123

score 0 · Answer 2 · answered Jul 03 '17 at 01:31

0

ngModel needs name into input:

<input type="text" [(ngModel)]="name" name="nome">

answered Jul 03 '17 at 01:31

Tiago Pereira

29
4

Angular 4: Can't bind to 'ngModel'

2 Answers2