0

I followed this tutorial for my project.

When I run my angular application following error appear in the console.

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("for="name">First Name</label>
      <input type="text" class="form-control" id="firstName" required [ERROR ->][(ngModel)]="employee.firstName" name="firstName">
    </div>

"): ng:///AppModule/CreateEmployeeComponent.html@5:70
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l for="name">Last Name</label>
      <input type="text" class="form-control" id="lastName" required [ERROR ->][(ngModel)]="employee.lastName" name="lastName">
    </div>

"): ng:///AppModule/CreateEmployeeComponent.html@10:69
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("l for="name">First Name</label>
      <input type="text" class="form-control" id="emailId" required [ERROR ->][(ngModel)]="employee.emailId" name="emailId">
    </div>

"): ng:///AppModule/CreateEmployeeComponent.html@15:68
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25963)
    at JitCompiler._compileTemplate (compiler.js:25951)
    at compiler.js:25895
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25895)
    at compiler.js:25808
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25807)

I can't figure out what is wrong with this code since I followed above tutorial carefully.

This is my html file.

<h3>Create Employee</h3>
<div [hidden]="submitted" style="width: 400px;">
  <form (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="name">First Name</label>
      <input type="text" class="form-control" id="firstName" required [(ngModel)]="employee.firstName" name="firstName">
    </div>

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

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

    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

<div [hidden]="!submitted">
  <h4>You submitted successfully!</h4>
  <!-- <button class="btn btn-success" (click)="newEmployee()">Add</button> -->
</div>
James Z
  • 12,209
  • 10
  • 24
  • 44
usenanayake
  • 189
  • 2
  • 17
  • probably a duplicate... https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input – AT82 Nov 14 '19 at 17:35
  • Does this answer your question? [Can't bind to 'ngModel' since it isn't a known property of 'input'](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) – The Head Rush Nov 14 '19 at 20:04

1 Answers1

1

import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http';

imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ],

Add this two imports in your app.module.ts file

Mahesh Koppineedi
  • 11
  • 1