TextField

Using a TextField requires the text-field module.

import * as textFieldModule from "tns-core-modules/ui/text-field";

Binding two TextFields text property to observable view-model property.

<TextField text="{{ someProperty }}" />
<TextField text="{{ someProperty }}" />
function pageLoaded(args) {
    var page = args.object;
    var obj = new observable.Observable();
    obj.set("someProperty", "Please change this text!");
    page.bindingContext = obj;
}
exports.pageLoaded = pageLoaded;

Creating a TextField

var textField = new textFieldModule.TextField();

Setting the text of a TextField

textField.text = "Hello, world!";

Setting the text of a TextField

textField.hint = <any>expectedValue;

Binding text property directly to model

var model = new observable.Observable();
model.set("username", "john");
var options: bindable.BindingOptions = {
    sourceProperty: "username",
    targetProperty: "text"
}
textField.bind(options, model);
// textField.text is now "john"
model.set("username", "mary");
// textField.text is now "mary"

Setting the hint of a TextField

textField.hint = "type your username here";

Binding hint property directly to model

var model = new observable.Observable();
model.set("hint", "type your username here");
var options: bindable.BindingOptions = {
    sourceProperty: "hint",
    targetProperty: "hint"
}
textField.bind(options, model);
// textField.hint is now "type your username here"
model.set("hint", "type your password here");
// textField.hint is now "type your password here"

Setting the secure property of a TextField

textField.secure = true;

Binding secure property directly to model

var model = new observable.Observable();
model.set("secure", true);
var options: bindable.BindingOptions = {
    sourceProperty: "secure",
    targetProperty: "secure"
}
textField.bind(options, model);
// textField.secure is now true
model.set("secure", false);
// textField.secure is now false

Setting the maxLength property of a TextField

<TextField autocorrect="false" hint="Setting Max text length(max 3 characters)" maxLength="3" />
<TextField autocorrect="false"  hint="Setting Max text length(max 3 characters) with secure='true'" maxLength="3" secure="true" />

Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.