Как изменить свойство текстового поля с 'onEditingFinished' в Qt QML

Question

Я пытаюсь изменить цвет границы и ширину моего TextField в зависимости от проверки vaildation (функция javascript, которая возвращает true, если все в порядке).Если пользователь вводит недопустимую дату рождения, я хочу закрасить рамку текстового поля красным.Вот мое определение qml:

        TextField{
            id: dob
            placeholderText: qsTr("dd-mm-yyyy")
            font.pixelSize: 14
            Layout.fillWidth: true
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    id:dobstyle
                    radius: 2
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "black"
                    border.width: 1
                }
            }
            inputMethodHints: Qt.ImhDate
            onActiveFocusChanged: {
                inputMask= "00-00-0000"
            }
            onEditingFinished: {
                var datesplit = dob.text.split("-");
                var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
                var logichk = (isValidDateLogical(jsDOB));
                var validchk = (isValidDate(dob.text))
                if(!validchk || !logichk)
                {
                    dobstyle.border.color="red"
                    dobstyle.border.width=3
                }
            }
            selectByMouse: true
        }

Я получаю 'ReferenceError: dobstyle is not определено' Есть идеи, как лучше всего этого добиться?

Answer 1

TextFieldStyle является компонентом, и то, что находится внутри, не существует снаружи; вам нужно создать свойство в TextField и создать привязку, а затем только изменить свойство:

...
Layout.fillWidth: true
property color bordercolor: "black" // <---
property int borderwidth: 1 // <---
style: TextFieldStyle {
    textColor: "black"
    background: Rectangle {
        id:dobstyle
        radius: 2
        implicitWidth: 100
        implicitHeight: 24
        border.color: dob.bordercolor // <---
        border.width: dob.borderwidth // <---
    }
}
...
onEditingFinished: {
    var datesplit = dob.text.split("-");
    var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
    var logichk = isValidDateLogical(jsDOB));
    var validchk = (isValidDate(dob.text))
    if(!validchk || !logichk)
    {
        dob.bordercolor ="red" // <---
        dob.borderwidth = 3 // <---
    }
}