Angular: Cant bind to ngModel since it is nt a known property of input

Angular: Cant bind to ngModel since it is nt a known property of input

This is a short tutorial on How to fix and solve for. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’

In the Angular application, When you add the ngModel directive to the input component, You get this error, and ngModel is used for two-way data binding data from the component to the template.

You can see my previous about Angular button click event example Below is an example of reading the input text value on a button click.

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  username: string = "";
  clickme() {
    console.log("it does nothing", username);
  }
}

app.component.ts

<p>
  <input type="text" id="username" name="username" [(ngModel)]="username" />
</p>
<h1>{{username}}</h1>

<button type="button" (click)="clickme()">Clickme</button>

The following are the errors that occurred when handling form input text fields in the Angular application

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. This is a common error during 2-way data binding integrated using ngModel in input elements. Uncaught Error: Template parse errors: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’. 1. If ‘ngModel’ is an Angular directive, then add ‘CommonModule’ to the ‘@NgModule.imports’ of this component. 2. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (“

How do you solve that can’t bind to ngModel since it isn’t a known property of input?

In the Application, if you are using two-way binding, You have to include the following things to fix it. The following are different things.

Missing FormModule:

  • The reason is that ngModel is not available in the NgModule scope.

  • import the FormsModule module into the application module to tell NgModule that ngModel is available.

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

  • Open app.module.ts, change the below

    • from
        imports: [
      BrowserModule,
],
    • to
        imports: [
  BrowserModule,
  FormsModule
],

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

NgModel attribute spelling check Please make sure that syntax is correctly defined ngModel attribute - [(ngModel)] And also double-check the spelling as well as a variable declared in Component.

Import ReactiveModule if you are using reactive forms, Please import ReactiveModule to fix this.

import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
  declarations: [],
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

For Lazy Loaded modules:

If your application uses lazy loaded modules, You have to import FormsModule, ReactiveFor`msModule in each child module instead of the parent module(app.module.ts)

Conclusion

In this tutorial, Learned multiple ways to fix

  • Import formModule in the application module for two way binding to work

  • Check Syntax for ngModel binding

  • import reactive module in case of reactive for

    m

  • To fix lazy loaded modules, Import these modules in child modules instead of the parent