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

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


In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module.

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

EDIT

Since there are lot of duplicate questions with the same problem, I am enhancing this answer.

There are two possible reasons

  • Missing FormsModule, hence Add this to your Module,

    import { FormsModule } from '@angular/forms';@NgModule({    imports: [        FormsModule          ]
  • Check the syntax/spelling of [(ngModel)] in the input tag


This is a right answer. you need to import FormsMoudle

first in app.module.ts

**

import { BrowserModule } from '@angular/platform-browser';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { NgModule  } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    FormsModule,    ReactiveFormsModule ,    BrowserModule,    AppRoutingModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

**second in app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';import { RouterTestingModule } from '@angular/router/testing';import { AppComponent } from './app.component';import { FormsModule } from '@angular/forms';describe('AppComponent', () => {  beforeEach(async(() => {    TestBed.configureTestingModule({      imports: [        RouterTestingModule,        FormsModule      ],      declarations: [        AppComponent      ],    }).compileComponents();  }));

Best regards and hope will be helpfull


Your ngModel is not working because it's not a part of your NgModule yet.

You have to tell the NgModule that you have authority to use ngModel throughout your app, You can do it by adding FormsModule into your app.module.ts -> imports-> [].

import { FormsModule } from '@angular/forms';@NgModule({   imports: [ FormsModule ],       // HERE   declarations: [ AppComponent ],   bootstrap: [ AppComponent ] })