Html - Can't bind to 'ngmodel' since it isn't a known property of 'input'. Forms module already exists

Janvi
May 30, 2023
172 views
0 votes
2 Answers

I have included the forms module part as well in the app.module.ts file. The error still persists. And I am not sure what Error occurs in the template of component UpdateEmployeeComponent. means.

I did the spell check and everything. I deleted the whole code and re wrote it. As I have already included the forms module part, I don’t know what to do.

the below given is my update-employee.component.html code.

type here<!DOCTYPE html>
<html>
<div class="row">
    <div class="card col-md-6 offset-md-3 offset-md-3">
        <div class="row">
            <h3 class="text-center"> Update Employee </h3>
            <hr />
            <div class="card-body">
                <form (ngsubmit)="onSubmit()">

                    <div class="form-group">
                        <label> First Name</label>
                        <input type="text" class="form-control" id="firstName" [(ngmodel)]= "employee.firstName"
                            name="firstName">
                    </div>

                    <div class="form-group">
                        <label> Last Name</label>
                        <input type="text" class="form-control" id="lastName" [(ngmodel)]="employee.lastName"
                            name="lastName">
                    </div>

                    <div class="form-group">
                        <label> Email Id</label>
                        <input type="text" class="form-control" id="emailId" [(ngmodel)]="employee.emailId"
                            name="emailId">
                    </div>
                    <br />
                    <button class="btn btn-success" type="submit">Submit</button>

                </form>
            </div>
        </div>
    </div>
</div>
</html>

Can't bind to 'ngmodel' since it isn't a known property of 'input'.ngtsc(-998002)
update-employee.component.ts(9, 32): Error occurs in the template of component UpdateEmployeeComponent.

This is the error that I am getting.

And this is the app.module.ts file code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { CreateEmployeeComponent } from './create-employee/create-employee.component';
import { FormsModule} from '@angular/forms';
import { UpdateEmployeeComponent } from './update-employee/update-employee.component';
import { EmployeeDetailsComponent } from './employee-details/employee-details.component'
import {RouterModule} from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  imports: [RouterModule],
 
})

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    CreateEmployeeComponent,
    UpdateEmployeeComponent,
    EmployeeDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,

  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }