{

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


Angular fix for 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 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
    ```markup
        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 form
  • To fix lazy loaded modules, Import these modules in child modules instead of the parent
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.