ngModel not working in Angular4

Question

I am learning Angular 4 from the official site and I came to the part with 2-way data binding through ngModel. However, my app stops working as soon as I add [(ngModel)] to my component template, even though the FormsModule is imported in the module.ts file. The component does not load.
I am using Visual Studio Code.
This is my app.component.ts

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

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }

This is app.module.ts

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

    import { AppComponent, Hero } from './app.component';

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

The AppComponent is not loaded and just shows

Loading...

@Sajeetharan: I just had the same error. The page just stays blank. No errors on the command line. In the Javascript console (in Chrome), it says "Can't bind to 'ngModel' since it isn't a known property of 'input'." — Michael, Oct 10 '18 at 15:24
for anyone else who comes here because of this error: the tutorial explains the error and how to fix it. You just need to continue with the tutorial to fix this error. — Michael, Oct 10 '18 at 15:27
Check this post https://stackoverflow.com/questions/43298011/angular-error-cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-inpu/61123200#61123200 — Avinash, Apr 09 '20 at 14:16

score 35 · Accepted Answer · answered Jun 28 '17 at 05:26

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

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

@Michael i guess there is comment on that line of the code right , Forms Module Import should fix it . — Rahul Singh, Oct 11 '18 at 17:48

bvdb · Answer 2 · 2023-08-08T21:56:59.137

As others pointed out, it is important to import the FormsModule (e.g. in your app.module.ts file.) In this specific question, it was missing in the import section.

But I added this answer to warn you about something else, which I run into from time to time.

If you just use ngModel standalone, without a form somewhere, you don't have to specify a name for the input.

<input ... [(ngModel)]="model.something">

But when you do use it in a form, the name attribute becomes mandatory !

<form>
  <input ... name="something" [(ngModel)]="model.something">
</form>

It's actually in the docs:

When using the ngModel within tags, you'll also need to supply a name attribute so that the control can be registered with the parent form under that name.

If you miss it, it won't show any errors at all, it just won't work.

Pac0 · Answer 3 · 2017-12-18T06:43:50.863

8

In addition of FormsModule needed in the imports section of the module declaration, you have to use a form tag, or a ngForm directive to enable the ngModel functionalities.

Withoutou can also use a standalone control to use ngModellike this :

 <input [(ngModel)]="variable" #ctrl="ngModel" >

Source :Angular documentation

edited Dec 18 '17 at 06:43

answered Oct 10 '17 at 07:43

Pac0

21,465
8
65
74

Great answer! much better than the others, which are only code. – John Henckel Dec 15 '17 at 23:10

score 3 · Answer 4 · answered Nov 12 '17 at 17:12

3

// add the import in module and add FormModule in import:
import { NgModule } from '@angular/core'
 imports: [
    BrowserModule,
   // add FormModule in import
    FormsModule
]

answered Nov 12 '17 at 17:12

rahul kumar

135
6

score 0 · Answer 5 · answered Jul 01 '18 at 12:40

0

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

Then at @NgModule(){imports:[FormsModule]} with other staff

answered Jul 01 '18 at 12:40

Yuresh Karunanayake

519
1
4
10

Owamamwen · Answer 6 · 2021-08-04T09:17:21.133

0

two-way binding

inside app.module.ts

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

imports: [ FormsModule ],

edited Aug 04 '21 at 09:17

answered Aug 01 '21 at 14:07

Owamamwen

61
3

score 0 · Answer 7 · answered Nov 03 '21 at 18:58

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

Be careful that if you use [(ngModel)] in a component that exists in your custom module, you must add this line to your custom.module not app.module.

In this case by Adding this line to app.module nothing change and you still see the error.

score 0 · Answer 8 · answered Dec 29 '21 at 16:40

Add import { NgModule } from '@angular/core'; in app-routing.module.ts file. Make sure import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; is available in app.module.ts

imports: [ BrowserModule, FormsModule, AppRoutingModule]

score 0 · Answer 9 · answered Jan 06 '23 at 10:40

0

For those which are still having this problem. If an [(ngModel)] attribute is applied on a html tag within the tag, ngModel will not behave like it should.

Get rid of any tags within a form tag to retrieve the original behaviour of ngModel.

answered Jan 06 '23 at 10:40

Koen van der Marel

164
1
6

ngModel not working in Angular4

9 Answers9