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

Question

I am following the Angular 2 tutorial on MVA. I can't seem to get the two way binding to work. I applied the fix in Can't bind to 'ngModel' since it isn't a known property of 'input' but this isn't working. The error is below:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <p>
            <input [ERROR ->][(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
"): TasksComponent@2:19 ; Zone: <root> ; Task: Promise.then ;

My main.ts code is as follows:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component, OnInit } from '@angular/core';

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


@Component({
    selector: 'tasks',
    template: `
        <p>
            <input [(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
    `
})
export class TasksComponent implements OnInit {
    sampleText: string = "";
    ngOnInit() {}
}

@Component({
    selector: 'app',
    directives: [TasksComponent],
    template: `
        <h1>Hello World</h1>
        <tasks></tasks>
    `
})
export class AppComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

bootstrap(AppComponent);

The code works if I comment out the two way binding. How can I fix this?

what version of Angular RC you are using? IF RC5 can you add the root NgModule? — Madhu Ranjan, Aug 19 '16 at 13:31
I am using RC5. I haven't created any module. The main.ts is the only file I created in my app folder. — topher, Aug 19 '16 at 13:35
You need to create a root NgModule in which you import the FormsModule — AbdulRahman AlHamali, Aug 19 '16 at 14:05

Madhu Ranjan · Accepted Answer · 2020-08-31T18:26:44.853

You may use below,

 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { Component, OnInit } from '@angular/core';

 // Import and use below directive
 import { FORM_DIRECTIVES } from '@angular/forms'; 


 @Component({
    selector: 'tasks',
    template: `
     <p>
        <input [(ngModel)]="sampleText" ><br/>
        <span>{{sampleText}}</span>
     </p>
   `
   , directives: [FORM_DIRECTIVES]
 })
 export class TasksComponent implements OnInit {
   sampleText: string = "";

   constructor() {}
 
   ngOnInit() {}
 }

 @Component({
   selector: 'my-app',
   directives: [TasksComponent],
   template: `
      <h1>Hello World</h1>
      <tasks></tasks>
    `
 })
export class AppComponent implements OnInit {
   constructor() {}

   ngOnInit() {}
}

bootstrap(AppComponent);

Here is the Plunker!!

However you should consider using NgModule, and import the FormsModule in it.

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

1 Answers1