TextInput value retain in QML?

eswar

How can I keep a value in a text input after a submit button clicked or changing different tabs in qml?

? Offline

Hi! Please explain what exactly the problem is. A TextInput will not change its text property unless you tell it to.

eswar

@Wieland

Hi
I am beginner of qml.
I try to design application form . In that page contain lot of textfield like name, age, address, etc. It consists of two pages. If i press next button the next page of the form will be appear. If i press previous button from 2 page, the textfield in the page 1 will be cleared. I need solution for the textfield entered data will appear without clearing.

Pradeep Kumar

Hi,

Just tried the sample program , where i took two pages
first page is to enter username and password, clicking on submit, it navigates to another page.

In another page i have back button, clicking on back button, navigates to first page where TextInput fields of first page are not cleared.

Here are the two qml files

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
id: windowObject
visible: true
width: 640
height: 480

Second
{
    id: secondPage
    visible: false
    MouseArea{
        anchors.fill: secondPage.backvisble
        onClicked:
        {
            secondPage.visible = false
            subWindowObject.visible = true
        }
    }
}


Rectangle
{
    id: subWindowObject
    x:100
    y:50
    width: 500
    height: 350

    Rectangle
    {
        id: userNameLabelObject
        width: 150
        height: 50
        color: "gray"

        Text {
            width: 50
            height: 50
            id: userNameText
            text: qsTr("UsrName")
            font.bold: true
            font.pixelSize: 14
            anchors.centerIn: userNameLabelObject
        }
    }

    Rectangle
    {
        id: textInputRectObject
        width: 150
        height: 50
        border.color: "black"

        anchors.left: userNameLabelObject.right

        TextInput {
            width: 50
            height: 50
            color: "orange"
            id: textInputObject
            font.bold: true
            font.pixelSize: 14
            anchors.centerIn: textInputRectObject
        }
    }




    Rectangle
    {
        id: passwordLabelObject
        width: 150
        height: 50
        color: "gray"
        anchors.top: userNameLabelObject.bottom
        Text {
            width: 50
            height: 50
            id: passwordText
            text: qsTr("Password")
            font.bold: true
            font.pixelSize: 14
            anchors.centerIn: passwordLabelObject
        }
    }

    Rectangle
    {
        id: textInputRectObject2
        width: 150
        height: 50
        anchors.top: textInputRectObject.bottom
        anchors.left: passwordLabelObject.right
        border.color: "black"

        TextInput {
            width: 50
            height: 50
            color: "orange"
            id: textInputObject2
            font.bold: true
            font.pixelSize: 14
            echoMode: TextInput.Password
            anchors.centerIn: textInputRectObject2
        }
    }

    Rectangle
    {
        x:200
        y:200
        id: submitButton
        width: 150
        height: 50
        color: "skyblue"
        Text {
            id: submitText
            font.bold: true
            font.pixelSize: 14
            anchors.centerIn: submitButton
            text: qsTr("Submit")
        }
    }
    MouseArea
    {
        anchors.fill: submitButton
        onClicked: {
            secondPage.visible = true
            subWindowObject.visible = false
        }
    }
}

}

Second.qml

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Rectangle {

id: secondRectObejct
width: 500
height: 500

property alias backvisble: backButton


Rectangle
{

    id:backButton
    width: 150
    height: 50
    color: "skyblue"
    anchors.centerIn: parent
    Text {
        id: backText
        font.bold: true
        font.pixelSize: 14
        anchors.centerIn: backButton
        text: qsTr("Back")
    }
}

}

Hope the sample will help you.

Thanks,

eswar

@Pradeep Kumar

Thank for your answer.