Have you seen all of the free code samples available on our Marketplace?

NativeScript Angular

Text Field

The TextField component allows you to type text in your app. The TextField has attributes such as secure for handling password fields, and pipes for specifying the text format the control should use.

Image

Basic Text Field

TextField provides multiple properties and several events for handling the user input and interaction. To submit a value use the returnPress event along with the returnKeyType property. To handle a TextFiled being focused use the focus event. To handle an interaction when the user leaves TextField use the blur event. To explicitly show and hide a keyboard, we can call the methods focus and dismissSoftInput.

<TextField hint="Enter date" 
           [text]='birthDate | date:"MM/dd/yy"' 
           secure="false"
           keyboardType="datetime"
           returnKeyType="done" 
           (returnPress)="onReturnPress($event)"
           autocorrect="false"
           maxLength="10"
           (focus)="onFocus($event)" 
           (blur)="onBlur($event)" 
           class="input input-border"></TextField>
firstTfLoaded(args) {
    let firstTextfield = <TextField>args.object;
    setTimeout(() => {
        firstTextfield.focus(); // Shows the soft input method, ususally a soft keyboard.
    }, 100);
}

onReturnPress(args) {
    // returnPress event will be triggered when user submits a value
    let textField = <TextField>args.object;

    // Gets or sets the placeholder text.
    console.log(textField.hint);
    // Gets or sets the input text.
    console.log(textField.text);
    // Gets or sets the secure option (e.g. for passwords).
    console.log(textField.secure);

    // Gets or sets the soft keyboard type. Options: "datetime" | "phone" | "number" | "url" | "email"
    console.log(textField.keyboardType);
    // Gets or sets the soft keyboard return key flavor. Options: "done" | "next" | "go" | "search" | "send"
    console.log(textField.returnKeyType);
    // Gets or sets the autocapitalization type. Options: "none" | "words" | "sentences" | "allcharacters"
    console.log(textField.autocapitalizationType);

    // Gets or sets a value indicating when the text property will be updated.
    console.log(textField.updateTextTrigger);
    // Gets or sets whether the instance is editable.
    console.log(textField.editable);
    // Enables or disables autocorrection.
    console.log(textField.autocorrect);
    // Limits input to a certain number of characters.
    console.log(textField.maxLength);

    setTimeout(() => {
        textField.dismissSoftInput(); // Hides the soft input method, ususally a soft keyboard.
    }, 100);
}

onFocus(args) {
    // focus event will be triggered when the users enters the TextField
    let textField = <TextField>args.object;
}

onBlur(args) {
    // blur event will be triggered when the user leaves the TextField
    let textField = <TextField>args.object;
}

Improve this document

Demo Source


Text Field Binding

HTML

<StackLayout class="input-field">
    <TextField hint="Enter text" autocorrect="false" (textChange)="onTextChange($event)" (returnPress)="onReturn($event)" class="input input-border"></TextField>
        <Label class="h3 text-center" [text]="'The first input is: ' + firstTx" textWrap="true" marginBottom="25"></Label>
</StackLayout>

<StackLayout class="input-field">
    <TextField #secondTx hint="Enter some text and click the button" autocorrect="false" returnKeyType="done" (returnPress)="submit(secondTx.text)"
        class="input input-border"></TextField>
</StackLayout>

<Button text="Get the second input" (tap)="showAlert(secondTx.text)" class="btn btn-primary btn-active"></Button>

Handle TextField returnPress event

import { Component } from "@angular/core";
import { TextField } from "ui/text-field";

@Component({
    moduleId: module.id,
    templateUrl: "./text-field-binding.component.html",
    styleUrls: ["./../text-field.style.css"]
})
export class TextFieldBindingComponent {
    public firstTx: string = "";

    public onTextChange(args) {
        let textField = <TextField>args.object;

        console.log("onTextChange");
        this.firstTx = textField.text;
    }

    public onReturn(args) {
        let textField = <TextField>args.object;

        console.log("onReturn");
        this.firstTx = textField.text;
    }

    public showAlert(result) {
        alert("Text: " + result);
    }

    public submit(result) {
        alert("Text: " + result);
    }
}

Improve this document

Demo Source


API Reference for the TextField Class

Native Component

Android iOS
android.widget.EditText UITextField