NgModel error in console

Question

I am trying to log the ngModel from this component so I can inspect it for educational purpose

<input ngModel name="firstName" id="firstName" type="text" #firstname="ngModel" (change)="log(firstname)" class="form-control">

But I get this error, I don't seem to be able to diagnose the error.

Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "ngModel" ("">First Name</label>
<input [(ngModel)]="firstName" name="firstName" id="firstName" type="text" 
[ERROR ->]#firstname="ngModel" (change)="log(firstname)" class="form-control 
</div><div class="form-grou"): ng:///AppModule/ContactFormComponent.html@3:79 Can't bind to 'ngModel' 
since it isn't a known property of 

Answer 1

1. Copy the module codes you added
2. Delete the module and make sure the project compile using (ng serve) successfully.
3. Regenerate the module and put back your codes.
4. add FormsModule inside app.modile.ts

@NgModule({
      declarations: [
        AppComponent,
        ContactFormComponent
      ],
      imports: [
        BrowserModule,
        FormsModule
      ],