TS: Submitting a login form, capturing the event in the model and inspecting the textfields

#1

I am still trying to find a comfortable way to do things with NS. Moved from JS to TS (classes are more clear), and I pretend to use models and inheritance all that I can.

For starters I have a login form with such controls as these:

<TextField id="{{txtUser}}" class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" returnKeyType="next" returnPress="focusPassword()"></TextField>
...
<TextField id="{{txtPassword}}" class="input" hint="Password" secure="true" returnKeyType="done"></TextField>
....
<Button text="Log In" tap="{{onsubmit}}" class="btn btn-primary m-t-20"></Button>

Then the view model goes below… I can’t see to reach the values in the Textfields… i get undefined… Any pointer on what may be going on?

(BTW, CoreModel is an observable descendant that I made hoping to add some stuff to be shared across models, like loggedIn status)

import * as view from "tns-core-modules/ui/core/view";
import { topmost } from "ui/frame";
import { Page } from "ui/page";
import { CoreModel } from "~/shared/core-model";

export class LoginViewModel extends CoreModel {

    constructor() {
        super();
        // login form controls variables
        this.set("txtUser", "usuario");
        this.set("txtPwd", "");
    }

    onsubmit(args) {
       const page = <Page>args.object;      

       // GRAB variables in form
       this.set("txtUser",view.getViewById(page, "txtUser"));
       this.set("txtPwd", view.getViewById(page, "txtPassword"));

       alert(this.get("txtUser"));
       alert(view.getViewById(page, "txtPassword"));
                  
       // TODO: Validation against db
       this.loggedIn = true;

       // Back Home
       topmost().navigate({moduleName: "home/home-page", clearHistory: true});
    }
#2

You have to bind the value to text attribute of TextField, not to id.

#3

fool me! I’m only getting the textfield object instance this way, not the text property. Thanks a lot! (i’ve started from scratch, we’ll see!)

#4

For those struggling like me this is what worked so far! “currentPage” was the saviour.

/**
 *  Submit the login form, validate against DB via api
 */
export function onSubmit(args) {

    let txtUserField: TextField;
    let txtPwdField: TextField;
    const page = <Page>topmost().currentPage;

    // GRAB variables in form
    txtUserField = <TextField>page.getViewById("txtUser");
    txtPwdField = <TextField>page.getViewById("txtPassword");

    console.log(txtUserField.text);

    // TODO: Validation against db
    appSettings.setBoolean("isLoggedIn", true);

    // Back Home? or to the previous form! CLEAR FROM HISTORY!
    topmost().navigate({
                moduleName: "home/home-page",
                clearHistory: true});
}