ngModel not working in Angular4

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.


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 { }