Angular 2 ngModel two way binding

Question

I was trying to test the two way binding of Angular2 but I'm always getting this

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

How can I solve this ?

import { Component } from '@angular/core';


@Component({
  selector: 'impure-pipe',
  template: `<input type="text" [(ngModel)]='a'> <p>{{ a| calcPipe:b}}</p>`
})
export class PipesAppComponent {

  a: number = 2;
  b: number = 2;

}

duplicate [question](http://stackoverflow.com/questions/38880150/angular-2-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) — Avnesh Shakya, Dec 14 '16 at 14:54

Logan H · Accepted Answer · 2016-12-14T14:59:45.990

As it says on this page Template Syntax from the Angular 2 web site

Before we can use the ngModel directive in a two-way data binding, we must import the FormsModule and add it to the Angular module's imports list. Learn more about the FormsModule and ngModel in the Forms chapter.

Do you have the FormsModule imported in your app.module.ts?

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

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

score 1 · Answer 2 · answered Dec 14 '16 at 14:50

1

Make sure to import the FormsModule.

answered Dec 14 '16 at 14:50

Stefan

1,590
3
18
33

score 1 · Answer 3 · answered Dec 14 '16 at 14:51

1

Have you added a definition of FormsModule in app.module.ts?

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


@NgModule({
  imports: [
    FormsModule
  ],

answered Dec 14 '16 at 14:51

Alex Kojin

5,044
2
29
31

Angular 2 ngModel two way binding

3 Answers3