Angular 6 [(ngModel)] in view not changing variable in component - data-binding

Question

I have a ClientModule module separate from the main AppModule.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { ClientsRoutingModule } from './clients-routing.module';
import { ClientsListComponent } from './clients-list/clients-list.component';
import { ClientAddComponent } from './client-add/client-add.component';
import { ClientDetailComponent } from './client-detail/client-detail.component';
#NgModule({
imports: [
CommonModule,
ClientsRoutingModule
],
declarations: [ClientsListComponent, ClientAddComponent, ClientDetailComponent]
})
export class ClientsModule { }
I have FormsModule imported on AppModule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I am trying to bind input fields from view to the following component:
import { Component, OnInit, Input } from '#angular/core';
import { ClientModel } from '../client.model';
#Component({
selector: 'app-client-add',
templateUrl: './client-add.component.html',
styleUrls: ['./client-add.component.scss']
})
export class ClientAddComponent implements OnInit {
fname: string;
lname: string;
constructor() { }
ngOnInit() {
}
createClient() {
console.log(this.fname, this.lname);
}
}
And following is my view
<div class="card-body">
<form class="form">
<div class="form-group">
<label for="">First Name {{fname}}</label>
<input type="text" ([ngModel]) = "fname" class="form-control rounded-0" required>
</div>
<div class="form-group">
<label for="">Last Name</label>
<input type="text" ([ngModel]) = "lname" class="form-control rounded-0">
</div>
<button type="button" (click)="createClient()" class="btn btn-success float-center">Create New Client</button>
</form>
</div>
When I click the Create New Client button, the resultant log is undefined undefined
What am I doing wrong? I have spent a lot of time tackling this issue/bug in my code but so far its no good. Please help.
And this may be unrelated but I followed angular.io guide on lazy-loading of modules, where it mentions I should see an incoming chunk file while lazy-loading is happening in network tab but I don't. Maybe it has something to do with it?
EDIT
I also tried importing FormsModule in in ClientsModule. Problem persists.
EDIT
However, [(ngModel)] works as expected in app.component.ts of AppModule.

Answer 1

My bad.
In my view ngModel should be a banana in the box [(ngModel)] but I mistyped as a box in the banana ([]).