Can't bind to 'ngmodel' since it isn't a known property of 'input'

Question

Today, we'll discuss about the common error in Angular: Can't bind to 'ngmodel' since it isn't a known property of 'input'. The error will occur when we tend to use the two-way data binding using 'ngModel' in our input tag. Well, there's a very simple and quick fix to this error, just by importing the "FormsModule" module in our app.module.ts. Let's go through this blog to see how it works.

 Table of Contents:

1. What is "Can't bind to 'ngmodel' since it isn't a known property of 'input'"
2. Causes
3. Solution
4. The Conclusion
5. The Reference
   

What is "Can't bind to 'ngmodel' since it isn't a known property of 'input'" #

As we mentioned above, this error occurs when we try to use ngModel with the input tag but we didn't not import it in our Angular app.module.ts. Let's look at the example below:

In component.html

In component.ts

  name: string =  "";

This is the error:

  Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002)

Caution
Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002)

From above example, you may see that we're using two-way data binding (put a banana in a box) which bind between and "name" property in the ts file. The logic and syntax is exactly corerct, but why this error still happens? Let's move to the next section.

Causes #

Actually, ngModel is a directive in FormsModule in Angular. If we didn't import it in our app.module.ts, it means that we're not authorized to use ngModel throughout our Angular application. This is the reason why ngModel is not recognized in our even we're using it correctly. Therefore, we must tell our Angular application that ngModel is actually a part of our aplication. So how? Let's continue exploring.

Solution #

First, go to your app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

export class AppModule { }

Next, import the FormsModule in your app.module.ts:

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

Finally, put the FormsModule in imports: [ ] of the @NgModule directive:

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

With these, we're telling our Angular application that FormsModule is our part of member, and we can use the directives provided by it, such as ngModel. After this, you may see the error disappears and you can continue building your application or use ngModel anywhere in your components for two-way data binding!

The Conclusion #

Great, you must be able to solve this simple error after going through this study blog. In this blog, we've learned what is Can't bind to 'ngmodel' since it isn't a known property of 'input', its causes and the solution to fix it. Hope your guys enjoy this tutorial and find it helpful. Thanks :)

The Reference #

For further information, you may visit these links:

1. Two-Way Data Binding: https://angular.io/guide/two-way-binding
2. NgModel: https://angular.io/api/forms/NgModel