feat(StatusInput): add mode to ingnore unvalidated content
Add optional feature to StatusInput not to allow typing characters that are not validated updates #4961
This commit is contained in:
parent
a84026d74d
commit
4b579cddbe
|
@ -102,6 +102,20 @@ Column {
|
|||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Input with <i>StatusRegularExpressionValidator</i>"
|
||||
charLimit: 30
|
||||
input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
|
||||
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
|
||||
validators: [
|
||||
StatusRegularExpressionValidator {
|
||||
regularExpression: /^[0-9A-Za-z_\$-\s]*$/
|
||||
errorMessage: "Bad input!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
input.placeholderText: "Input width component (right side)"
|
||||
|
|
|
@ -44,7 +44,8 @@ Item {
|
|||
|
||||
enum ValidationMode {
|
||||
OnlyWhenDirty, // validates input only after it has become dirty
|
||||
Always // validates input even before it has become dirty
|
||||
Always, // validates input even before it has become dirty
|
||||
IgnoreInvalidInput // ignore the new content if it doesn't match
|
||||
}
|
||||
|
||||
property var errors: ({})
|
||||
|
@ -57,7 +58,9 @@ Item {
|
|||
root.errorMessage = ""
|
||||
}
|
||||
|
||||
property string _previousText: text
|
||||
function validate() {
|
||||
|
||||
if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
|
||||
return
|
||||
}
|
||||
|
@ -87,11 +90,23 @@ Item {
|
|||
if (errors){
|
||||
let errs = Object.values(errors)
|
||||
if (errs && errs[0]) {
|
||||
if(validationMode === StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
&& text.length > _previousText.length) {
|
||||
// Undo the last input
|
||||
const cursor = statusBaseInput.cursorPosition;
|
||||
statusBaseInput.text = _previousText;
|
||||
if (statusBaseInput.cursor > statusBaseInput.text.length) {
|
||||
statusBaseInput.cursorPosition = statusBaseInput.text.length;
|
||||
} else {
|
||||
statusBaseInput.cursorPosition = cursor-1;
|
||||
}
|
||||
}
|
||||
errorMessage.text = errs[0].errorMessage || root.errorMessage;
|
||||
} else {
|
||||
errorMessage.text = ""
|
||||
}
|
||||
}
|
||||
_previousText = text
|
||||
}
|
||||
|
||||
if (asyncValidators.length && !Object.values(errors).length) {
|
||||
|
|
|
@ -50,7 +50,7 @@ StatusValidator {
|
|||
property var regularExpression
|
||||
|
||||
name: "regex"
|
||||
errorMessage: "Please enter a valid regular expression."
|
||||
errorMessage: `Must match regex(${validatorObj.regularExpression.toString()})`
|
||||
validatorObj: RegularExpressionValidator { regularExpression: root.regularExpression }
|
||||
|
||||
validate: function (value) {
|
||||
|
|
Loading…
Reference in New Issue