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

Dung Do Tien Jul 12 2021 291

I have created a template input text in  a small project with Angular 9 as below:

InputTextComponent.ts file

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

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

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

  ngOnInit() {
  }

}

html file

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

When I run the project I get an error: 

error TS8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

How can I fix this issue? Thanks for any suggestions.

Have 3 answer(s) found.
  • V

    Việt Trọng Đỗ Jul 12 2021

    To fix this issue you 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 as to avoid other errors.

  • D

    Deepak M Jul 12 2021

     In the app.module.ts file, I just added FormsModule package:

    import { FormsModule } from '@angular/forms';
    
    [...]
    
    @NgModule({
      imports: [
        [...]
        FormsModule
      ],
      [...]
    })

    And it works for me!

  • N

    Nguyễn Danh Ngọc Jul 12 2021

    Adding below code in app.module.ts file solved my issue

    Add forms import

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

    then add FormsModule in @NgModule's import section

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [ AppComponent ]
    })

    I hope it helpful for you.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close