ngModel not working in Nativescript - nativescript

Question

I have been developing a simple application on Nativescript playground recently, where i found that ngModel was not working on input type TextField. I have made sure that i import NativescriptFormModule in the module of the app. but still it is not working.

Answer 1

You the extended syntax instead of ngModel (text and textChange) as the TextFuield is a complex layout with multiple bindable properties (hint, text, returnType, etc.) - example Playground here and documentation article here
HTML
<TextField [hint]="hint" [text]="name" (textChange)="onTextChange($event)"></TextField>
TypeScript
export class SignupComponent implements OnInit {
name: string;
hint: string = "enter name";
tf: TextField;
onTextChange(args: EventData) {
console.log("onTextChange");
this.tf = <TextField>args.object;
console.log("tf.text: ", this.tf.text);
}
}

Answer 2

I had the same issue with the NativeScript Playground tutorial today. Could'nt have my [(ngModel)]="user.email" (or password) to work. I fixed it by importing the NativeScriptFormsModule and adding it to #NgModule imports in the app.module.ts
import { NativeScriptFormsModule } from "nativescript-angular/forms";
then
#NgModule({
imports: [NativeScriptFormsModule]
})
app.module.ts file:
import { NgModule } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppComponent } from "./app.component";
#NgModule({
imports: [
NativeScriptModule,
NativeScriptUIChartModule,
NativeScriptHttpClientModule,
NativeScriptFormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }