CODEWITHSUNDEEP
data-bindingangulartextfieldangular-ngmodel
dsum27
dsum27

Reputation: 515

NativeScript 2/ Angular 2 Data binding [(ngModel)] how do I update TextField programmatically.

I would like to update the TextField text property programmatically using angular2 data binding. From here it looks like I would set [(ngModel)]="email" in my layout then in my code add a property email. With the current set up, I am able to change the text property on load, but if I try and change the text property programmatically from a button click the changes to email are not reflected in the view's TextField text property. 

import { Component, OnInit } from '@angular/core';
import { User }              from '../../shared/user/user';
import { LoginModel }        from '../../model/login/login-model';
import { HttpService }       from '../../services/http/http-service';

@Component({
    selector:'login',
    templateUrl:'pages/login/login.component.html',
    providers: [HttpService]
})

export class LoginComponent implements OnInit {
    email:string = "[email protected]";
    user: User;
    //model: LoginModel;
    constructor(private _httpService: Httpservice) {
        //this.model = new LoginModel();
        this.user = new User();
    } //default constructor

    ngOnInit() {}

    onButtonTap() {
        //alert("onButtonTap clicked ");
        //this._mpixService.register(this.model.user);

        this.email = "[email protected]";
        alert("onButtonTap clicked " + this.email);
    }
}

My view

<ActionBar title="Login Mpix Tap To Print">
  <ActionItem text="Login" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<StackLayout>
    <TextField hint="Email Address" keyboardType="email"
        autocorrect="false" autocapitalization="none" [text]="email"></TextField>
    <TextField hint="Password" secure="true" keyboardType="password" 
        autocorrect="false" autocapitalization="none" [(ngModel)]="password"></TextField>

    <Button text="Sign In" (Tap)='onButtonTap()'></Button>
    <Button text="Sign up for Mpix" [nsRouterLink]="['/signup']"></Button>
</StackLayout>

I have also tried variations of TextField view property

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [text]="email" (emailChange)="email=$event"></TextField>

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email" [text]=email></TextField>

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email">{{email}}</TextField>

The text field is set to [email protected] when the interface first loads.

Upvotes: 3

Views: 3866

Answers (2)

dsum27
dsum27

Reputation: 515

This issue was fixed with a recent update. There are more details at the link below, Basically there was an unrelated build issue that was stopping the code before my code was able to run. After updating tns-core-modules and nativescript-angular it worked with the above code.

Nativescript 2.2 exception

Upvotes: 0

Casimir Compaore
Casimir Compaore

Reputation: 171

You may have to imports the forms module from NativeScript into your NgModule imports array:

import { NativeScriptFormsModule } from "nativescript-angular/forms";

and in NgModule attribute

@NgModule( {imports:[NativeScriptFormsModule]})

Upvotes: 17

Related Questions