Кнопка включения, когда группа текстовых полей заполнена

Question

Я хочу включить одну кнопку, когда и только когда группа текстовых полей заполнена и проверена с помощью RegExp. Если вы думаете в форме веб-регистрации, мне нужно такое же поведение в приложении QML. Конечно, я знаю, что это возможно с использованием кода JS, но моя цель не состоит в том, чтобы использовать его и делать это элегантным способом, используя только декларативный код qml. Есть идеи?

Это пример:

Label {
    text: qsTr('First name')
}

TextField {
    id: firstNameTextField
}

Label {
    text: qsTr('Last name')
}

TextField {
    id: lastNameTextField
}

Label {
    text: qsTr('email')
}

// Username
TextField {
    id: emailTextField
    placeholderText: qsTr("Enter email")
    smooth: true
    validator: RegExpValidator{ regExp: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i }
}

Label {
    text: qsTr('Password')
}

TextField {
    id: passwordTextField
}

Label {
    text: qsTr('Re-Password')
}

TextField {
    id: rePasswordTextField
}
Button {
    id:button
    enabled: // all text fields completed and validated
}

Answer 1

Вот то же самое решение, закодированное в декларативной форме:

Row {
    TextField {
        id: field1
        placeholderText: qsTr("Enter number 1")
        validator: IntValidator {bottom: 1; top: 9;}
    }
    TextField {
        id: field2
        placeholderText: qsTr("Enter number 2")
        validator: IntValidator {bottom: 11; top: 19;}
    }
    Button {
        id: btn
        text: "Send"
        enabled: field1.acceptableInput && field2.acceptableInput
    }
}

Из документации Qt:

acceptInput - Возвращает true, если текстовое поле содержит допустимый текст. Если был установлен валидатор или маска ввода, это свойство будет возвращать true, если текущий текст удовлетворяет валидатору или маске в качестве финальной строки.

Answer 2

Вот простой и грязный способ сделать это.
Используйте логические свойства в качестве промежуточного для включения кнопки, как показано ниже

Item{
property bool isNameFieldValid : false
property bool isAgeFieldValid : false

TextField {
    id: name
    placeholderText: qsTr("Enter name")
    validator:  RegExpValidator{regExp:"valid JS regEx"}
    onAccepted:isNameFieldValid=true
 }
TextField {
    id: age
    placeholderText: qsTr("Enter name")
    validator:  RegExpValidator{regExp:/[0-9A-F]+/}
    onAccepted:isAgeFieldValid=true
 }
Button{
 id:confirmButton
  enable:isNameFieldValid && isAgeFieldValid
 }
}

Но единственное, что поле проверяется только тогда, когда пользователь нажимает клавишу Enter на клавиатуре / клавиатуре.