CODEWITHSUNDEEP
angularinput
mkarpacka
mkarpacka

Reputation: 13

Ngmodel is not property of input

I have problem using NgModel, it is not working when I want to save data from input.

Uncaught Error: Template parse errors:
Can't bind to 'NgModel' since it isn't a known property of 'input'. ("
      placeholder="Account number"
      value="{{ account.number }}"
      [ERROR ->][(NgModel)]="newAccountNumber"
    />
  </mat-form-field>

I've already searched for solution, but only thing I found was to inport FormsModule and MatInputModule and I have those inports.

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
MatMenuModule,
MatIconModule,
MatToolbarModule,
MatButtonModule,
MatTableModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
MatSelectModule,
MatCardModule,
NoopAnimationsModule,
FormsModule,
ReactiveFormsModule
]

<mat-form-field class="example-full-width">
    <input
      matInput
      placeholder="Account number"
      value="{{ account.number }}"
      [(NgModel)]="newAccountNumber"
    />
     </mat-form-field>

What should I do to save data from input correctly?

Upvotes: 0

Views: 1706

Answers (3)

Patryk Panek
Patryk Panek

Reputation: 405

Try to use [(ngModel)] instead of [(NgModel)]. Model directive should start from lowercase

For more information take a look on Angular docs https://angular.io/api/forms/NgModel

Upvotes: 1

Utpaul
Utpaul

Reputation: 2007

Try it:

Try ngModel instead of NgModel

<mat-form-field class="example-full-width">
    <input
      matInput
      placeholder="Account number"
      value="{{ account.number }}"
      [(ngModel)]="newAccountNumber"
    />
     </mat-form-field>

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22213

You need to import FormsModule in app.module or in the module where your component is declared.

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

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

Upvotes: 0

Related Questions