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

Question

I have imported FormsModule in the module.ts but still compilation is failing with error - can't bind to 'ngModel' since it isn't a known property of input.

Note: I encountered the error after I created separate modules for each of the component in project. Initially there were no error with single module.ts

I am a beginner in angular and am unable to find the issue here, any help would be appreciated.

Component Code:

    import { Component } from '@angular/core';
    import{Customer}from"./CustomerApp.model";
    import {FormsModule} from "@angular/forms";
    @Component({
      templateUrl: './CustomerApp.CustomerView.html'
      //styleUrls: ['./app.component.css']
    })
    export class CustomerComponent {
      title = 'custApp';
      CustomerModel:Customer =new Customer();
      CustomerModels:Array<Customer> = new Array<Customer>();
      Add(){
    this.CustomerModels.push(this.CustomerModel);
    this.CustomerModel = new Customer(); //clear Ui
      }
    }

CustomerModule.ts -

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { CustomerComponent } from './CustomerApp.CustomerComponent';
    import {FormsModule} from "@angular/forms";
    @NgModule({
      declarations: [
         CustomerComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        CommonModule,FormsModule
      ],
      providers: [],
      bootstrap: [CustomerComponent]
    })
    export class CustomerModule { }

main.ts

    import { enableProdMode } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { MainModule } from './CustomerApp/Home/CustomerApp.MainModule';
    import { environment } from './environments/environment';
    
    if (environment.production) {
      enableProdMode();
    }
    
    platformBrowserDynamic().bootstrapModule(MainModule)
      .catch(err => console.log(err));

CustomerView.html

Customer Code:

<input [(ngModel)] ="CustomerModel.CustomerCode" type="text"/><br/>
    Customer Name: <input [(ngModel)] ="CustomerModel.CustomerName"  type ="text"/><br/>
    Customer Amount: <input [(ngModel)] ="CustomerModel.CustomerAmount"  type="number"/><br/>
    <input (click) = "Add()" type =button value="Add"/><br/>
    
    {{CustomerModel.CustomerCode}}<br/>
    {{CustomerModel.CustomerName}}<br/>
    {{CustomerModel.CustomerAmount}}<br/>
    
    <table>
        <tr>
            <td>Customer Code</td>
            <td>Customer Name</td>
            <td>Customer Amount</td>
        </tr>
        <tr *ngFor ="let cust of CustomerModels">
            <td>{{cust.CustomerCode}}</td>
            <td>{{cust.CustomerName}}</td>
            <td>{{cust.CustomerAmount}}</td>
        </tr>
    </table>

model.ts

    export class Customer{
        CustomerCode:string="";
        CustomerName:string="";
        CustomerAmount:number=0;
    }

Project Folder structure is below -

Error screenshot -

-- EDIT - Added other 2 module.ts files -

CustomerApp.MainModule.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MasterPageComponent } from './CustomerApp.MasterPageComponent';
    import { HomeComponent } from './CustomerApp.HomeComponent';
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    @NgModule({
      declarations: [
          MasterPageComponent,
          HomeComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        BrowserModule
      ],
      providers: [],
      bootstrap: [MasterPageComponent]
    })
    export class MainModule { }

CustomerApp.SupplierModule.ts

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import {RouterModule} from "@angular/router";
    import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
    import { SupplierComponent } from './CustomerApp.SupplierComponent';
    //import { SupplierRoutes } from '../Routing/CustomerApp.SuplierRouting';
    
    @NgModule({
      declarations: [
          SupplierComponent
      ],
      imports: [
        RouterModule.forRoot(MainRoutes),
        CommonModule
      ],
      providers: [],
      bootstrap: [SupplierComponent]
    })
    export class SupplierModule { }

Answer 1

Perhaps a tad late, but hopefully will help others.

First, you should import FormsModule on app.module.ts -import { FormsModule } from "@angular/forms"

Second, use FormsModule like so:

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

Answer 2

1. You don't want to import modules in your component.

So remove this from the component:

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

2. Make sure CustomerModule is imported in your AppModule.

Let me know if that helps.

Answer 3

This error occurs when you try to use ngModel without importing the FormsModule. To fix this, add the following line to the imports section of your module

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

and also you can visit this link for more information