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 -
-- 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 { }
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]
})
So remove this from the component:
import {FormsModule} from "@angular/forms";
Let me know if that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.