{

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 solution for Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.

In 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 component to from template.

The below is an example for reading the input text value on 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. Following are different things.

Missing FormModule:

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

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

     import { FormsModule } from '@angular/forms';
    
  • Open app.module.ts, change the below

    • from
      imports: [
    BrowserModule,
    ],
    ```markup
    - 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 is declared in Component.

Import ReactiveModule if you are using reactive forms, Please import ReactiveModule inn order 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 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 application module for two way binding to work
  • Check Syntax for ngModel binding
  • import reactive module in case of reactive form
  • To fix in 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.