why [(ngModel)] is not working

Question

I am a new bee to angular 2. I have seen multiple answers on stackoverflow but none of them is working in my case here is the error that it is showing

Can't bind to 'ngModel' since it isn't a known property of 'md-select'. 1. If 'md-select' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.

and here is my code app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import 'hammerjs';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule.forRoot(),
    NavigationModule,
    FormsModule
  ],
  bootstrap: [
    AppComponent
  ]
})
**my component**
export class ToolbarComponent {
  private item: string = '3';
}

in the template of the component

<md-select [(ngModel)]="item">
  <md-option *ngFor="let v of allvalues()" [attr.selected]="v == avalue() ? true : null">{{v | translate}}</md-option>
</md-select>

please help me in solving this problem its been 2 days I am stuck at this problem.

You only provided the imports of your app.module, did you include them inside the imports array in the @NgModule? Is the component part of this module? — eko, Jan 09 '17 at 14:33
yes @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MaterialModule.forRoot(), NavigationModule, FormsModule ], bootstrap: [ AppComponent ] }) — Muhammad Hamza Altaf, Jan 09 '17 at 14:35
Where do you declare ToolbarComponent ? Please give all the relevant info.. — eko, Jan 09 '17 at 14:40
please read this. It may help you. http://stackoverflow.com/questions/34948961/angular-2-custom-form-input/34998780#34998780 — pkrawat1, Jan 09 '17 at 14:59
what do u mean by where do I declare toolbaarcomponent? can you please explain a bit, it is in the app/navigation directory. Basically in this component I am injeting a service and using its functions which gives me list of the dropdown options , then as you can see in the template i call those functions and show in dropdown, all I want is to show the default value of the dropdown which should be equal to getPreset() function, i tried selected, ngSelected,[selected] all gives same error that i mentioned above replace ngModel with ngSelected or others. — Muhammad Hamza Altaf, Jan 09 '17 at 15:18
Are you using webpack? I have the same problem, but only when I do `webpack -p` rather than just `webpack` — John Rood, Jan 31 '17 at 17:22
actually. in my case it says 'ngmodel' with a lowercase 'm', so my problem might be different — John Rood, Jan 31 '17 at 17:30

score 2 · Answer 1 · answered Feb 04 '23 at 17:50

2

For anyone who ends up here I believe the anwser is that you need a name property for your input fields inorder for a two way binding to work.

<input matInput [(ngModel)]="name" id="name" name="name" placeholder="name">

answered Feb 04 '23 at 17:50

TheNetRunner

21
3

great answer, I was struggling with a similar problem and I didn't noticed this, thanks for helping with this! – Xelit3 Aug 24 '23 at 10:28

why [(ngModel)] is not working

1 Answers1