Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'

Question

I'm using Angular 4.2.4 and I am getting an error in the console :

Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'.

while I include FormsModule in file app.module.ts like as

import { FormsModule,ReactiveFormsModule }   from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    ...APP_LAYOUTS,
    ...APP_COMPONENTS,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

and by html code is as

<form id="user-add-form">
    <div class="text-center m-t-10"><span class="login-img"><i class="ti-check-box"></i></span></div>
    <h3 class="login-title">Add New User</h3>
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="first_name" [(ngModel)]="first_name" placeholder="First Name">
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <input class="form-control" type="text" name="last_name" [(ngModel)]="last_name" placeholder="Last Name">
        </div>
      </div>
    </div>
    <div class="form-group">
      <input class="form-control" type="email" name="email" [(ngModel)]="email" placeholder="Email" autocomplete="off">
    </div>
    <div class="form-group">
      <input class="form-control" id="password" type="password" name="password" [(ngModel)]="password" placeholder="Password">
    </div>
    <div class="form-group">
      <input class="form-control" type="password" name="password_confirmation" [(ngModel)]="password_confirmation" placeholder="Confirm Password">
    </div>
    <div class="form-group">
      <button class="btn btn-info btn-block" type="submit">Submit</button>
    </div>
  </form>

and some component file code is

import { FormBuilder,Validator } from '@angular/forms';
export class UserAddComponent implements OnInit, OnDestroy, AfterViewInit {
    first_name: string;
    last_name: string;
    email: string;
    password: string;
    password_confirmation: string;

I already see the below links but not get any solutions

Angular 4 - "Can't bind to 'ngModel' since it isn't a known property of 'input' " error

Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'

Can't bind to 'ngModel' since it isn't a known property of 'input'

please help to resolve it

Answer 1

From Wiki,

This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs.

You also get this error if "x" really isn't a property or if "x" is a private component property (ie, lacks the @Input or @Output decorator).

For example, if "x" is ngModel, you may not have imported the FormsModule from @angular/forms.

Perhaps you declared "x" in an application feature module but forgot to export it? The "x" class isn't visible to other components of other NgModules until you add it to the exports list

So just import 'FormsModule' in 'UserAddComponent'

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

Hope it helps !!