Angular - Can't bind to 'ngValue' since it isn't a known property of 'mat-option'

angular angular5
Manoj Shrestha picture Manoj Shrestha · Feb 14, 2018 · Viewed 14.1k times · Source

I'm using angular 5 and I'm getting the console error:

Can't bind to 'ngValue' since it isn't a known property of 'mat-option'

My template looks something like as follows:

  <mat-select placeholder="Select Book" name="patient" [(ngModel)]="selectedBook">
     <mat-option *ngFor="let eachBook of books" [ngValue]="eachBook">{{eachBook.name}}</mat-option>
  </mat-select>

I've imported both MatSelectModule and MatOptionModule.

How can we resolve this?

Answer

Mark picture Mark · Sep 2, 2018

The accepted answer is not a solution but a work-around, as value and [ngValue] serve different purposes. value can be used for simple string values, whereas [ngValue] is necessary to support non-string values.

Per the documentation:

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any select control that has a form directive. You do not need to add a special selector to activate it.

If you are getting this error, you most likely need to import either FormsModule or ReactiveFormsModule into your app.

For example, in app.module.ts:

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

// ...

imports: [
    FormsModule,
    ...
]

Related questions

Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found

When running the terminal commands ng server or ng serve --live-reload=true, I'm getting this issue: The serve command requires to be run in an Angular project, but a project definition could not be found.

Read More
How to add CORS request in header in Angular 5

I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers? Here is service file code: import { …

Read More
Set focus on <input> element

I am working a front-end application with Angular 5, and I need to have a search box hidden, but on click of a button, the search box should be displayed and focused. I have tried a few ways found on StackOverflow …

Read More