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

If you are new to Angular, you might have encountered Can't bind to 'ngModel' since it isn't a known property of 'input' error when you use input element with [(ngModel)].

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-input-element',
  templateUrl: './input-element.component.html',
  styleUrls: ['./input-element.component.scss']
})
export class InputElementComponent implements OnInit {

  public inputValue : string;
  constructor() { 
      this.inputValue = "two way Binding";
  }

  ngOnInit() {
  }

}

And in input-element.component.html file I have added an input element with [(ngModel)].

<input type="text" [(ngModel)]="inputValue"/>

When you try to compile the above code you will get following error.

In Angular applications, If you want to use two-way data binding for form inputs in we need to import the FormsModule from @angular/core.

To fix Can't bind to 'ngModel' since it isn't a known property of 'input' error in Angular applications we have to import FormModule in app.module.ts file.

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

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

If you are using FormBuilder class to create reactive form we have to import ReactiveFormsModule as well to avoid below error.

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’