TextField

Using a TextField requires the text-field module.

import { TextField } from "tns-core-modules/ui/text-field";

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

<TextField text="{{ someProperty }}" />
<TextField text="{{ someProperty }}" />
import { BindingOptions } from "tns-core-modules/ui/core/bindable";

import { Observable } from "tns-core-modules/data/observable";

Creating a TextField

var textField = new 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();
model.set("username", "john");
var options: 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();
model.set("hint", "type your username here");
var options: 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();
model.set("secure", true);
var options: 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" />
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

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