Angular 4 Error: Can’t Bind to ngModel since it isn’t a known property of select

← PrevNext →

I have shared a post here on my blog recently where I have explained how to use ngFor directive in Angular to bind dynamic data to a SELECT element. While working on this example, I have encountered an error, which said, Can’t Bind to ngModel since it isn’t a known property of select. Let's see how we can fix this error.

Here’s the screenshot of that error.

Angular 4 Error: Can't Bind to ngModel since it isn't a known property of 'select'

What Caused this Occurred?

There could be other reasons. However, in my case, I am doing a two way binding with a <select> element and a <p> element, using the ngModel directive. Here’s what I did.

<select [(ngModel)]="selected">
    <option value="">-- Select a Value --</option>
    <option *ngFor="let book of myBooks" [(ngValue)]="book.BookName">{{book.BookName}}</option>
</select>

<p>{{ selected }}</p>

You can find that example here.

Whenever I select a value from the dropdown list, the <p> element will display the value. However, my browser’s console shows the error.

👉 How to show hide or Toggle elements in Angular
Toggle in Angular

Fix this Error

To get rid of this error you will have to import the FormsModule class in your app.module.ts file, followed by updating your @NgModule() decorator.

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

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

Now check your browser. If everything is rightly done, you will see Angular 4 two way binding in action and the error’s gone. This solution applies to other elements too.

Finally, the solution in two lines:

1) Import FormsModule in your app.module.ts file

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

2) Update @NgModule decorator

@NgModule({
  declarations: [ AppComponent  ],
  imports: [ 
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  ...
})

That's it. Thanks for reading.

← PreviousNext →