feat(StatusValidator): allow validators to provide default `errorMessage`
Validators can now define a default `errorMessage` like so: ```qml StatusValidator { ... errorMessage: "..." } ``` Because there's no access to runtime validation errors, `errorMessage` have to be static. However, if applications wish to provide their own `errorMessage` they can still override it and make it dynamic: ```qml SomeValidator { ... errorMessage: input.errors.someValidator ? "Whoopsie" : "" } ```
This commit is contained in:
parent
48309d3040
commit
1a23cc1912
|
@ -84,19 +84,22 @@ Column {
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusInput {
|
StatusInput {
|
||||||
|
id: input
|
||||||
label: "Label"
|
label: "Label"
|
||||||
charLimit: 30
|
charLimit: 30
|
||||||
input.placeholderText: "Input with validator"
|
input.placeholderText: "Input with validator"
|
||||||
|
|
||||||
validators: [
|
validators: [
|
||||||
StatusMinLengthValidator { minLength: 10 }
|
StatusMinLengthValidator {
|
||||||
]
|
minLength: 10
|
||||||
|
errorMessage: {
|
||||||
onTextChanged: {
|
if (input.errors && input.errors.minLength) {
|
||||||
if (errors && errors.minLength) {
|
return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
|
||||||
errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}`
|
}
|
||||||
|
return ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusInput {
|
StatusInput {
|
||||||
|
|
|
@ -34,18 +34,30 @@ Item {
|
||||||
property var errors: ({})
|
property var errors: ({})
|
||||||
|
|
||||||
function validate() {
|
function validate() {
|
||||||
|
statusBaseInput.valid = true
|
||||||
if (validators.length) {
|
if (validators.length) {
|
||||||
for (let idx in validators) {
|
for (let idx in validators) {
|
||||||
let result = validators[idx].validate(statusBaseInput.text)
|
let validator = validators[idx]
|
||||||
|
let result = validator.validate(statusBaseInput.text)
|
||||||
|
|
||||||
if (typeof result === "boolean" && result) {
|
if (typeof result === "boolean" && result) {
|
||||||
statusBaseInput.valid = true
|
statusBaseInput.valid = statusBaseInput.valid && true
|
||||||
|
delete errors[validator.name]
|
||||||
} else {
|
} else {
|
||||||
if (!errors) {
|
if (!errors) {
|
||||||
errors = {}
|
errors = {}
|
||||||
}
|
}
|
||||||
errors[validators[idx].name] = result
|
result.errorMessage = validator.errorMessage
|
||||||
statusBaseInput.valid = false
|
errors[validator.name] = result
|
||||||
|
statusBaseInput.valid = statusBaseInput.valid && false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (errors){
|
||||||
|
let errs = Object.values(errors)
|
||||||
|
if (errs && errs[0]) {
|
||||||
|
errorMessage.text = errs[0].errorMessage || root.errorMessage;
|
||||||
|
} else {
|
||||||
|
errorMessage.text = ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -123,11 +135,11 @@ Item {
|
||||||
anchors.leftMargin: 16
|
anchors.leftMargin: 16
|
||||||
|
|
||||||
height: visible ? implicitHeight : 0
|
height: visible ? implicitHeight : 0
|
||||||
visible: !!root.errorMessage && !statusBaseInput.valid
|
visible: !!text && !statusBaseInput.valid
|
||||||
|
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
color: Theme.palette.dangerColor1
|
color: Theme.palette.dangerColor1
|
||||||
text: root.errorMessage
|
|
||||||
|
|
||||||
horizontalAlignment: Text.AlignRight
|
horizontalAlignment: Text.AlignRight
|
||||||
wrapMode: Text.WordWrap
|
wrapMode: Text.WordWrap
|
||||||
|
|
|
@ -6,6 +6,12 @@ StatusValidator {
|
||||||
|
|
||||||
name: "minLength"
|
name: "minLength"
|
||||||
|
|
||||||
|
errorMessage: {
|
||||||
|
minLength === 1 ?
|
||||||
|
"Please enter a value" :
|
||||||
|
`The value must be at least ${minLength} characters.`
|
||||||
|
}
|
||||||
|
|
||||||
validate: function (value) {
|
validate: function (value) {
|
||||||
return value.length >= minLength ? true : {
|
return value.length >= minLength ? true : {
|
||||||
min: minLength,
|
min: minLength,
|
||||||
|
|
|
@ -4,6 +4,7 @@ QtObject {
|
||||||
id: statusValidator
|
id: statusValidator
|
||||||
|
|
||||||
property string name: ""
|
property string name: ""
|
||||||
|
property string errorMessage: "invalid input"
|
||||||
|
|
||||||
property var validate: function (value) {
|
property var validate: function (value) {
|
||||||
return true
|
return true
|
||||||
|
|
Loading…
Reference in New Issue