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

I have shared a post here on my blog recently where I have explained how to use ngFor directive in Angular 4 to bind dynamic data to a SELECT element. While working on this example, I have encountered an error, which says, “Can’t Bind to ngModel since it isn’t a known property of select”. Many of my visitors shared this error with me too.

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 the 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.

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 the 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.

Previous - Using Angular 4 ngFor Directive to Bind Dynamic Data to SELECT Dropdown List using Web API in MVC 4Next - How to Show Hide or Toggle Elements in Angular 4



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!