[Solved] QInput fill-mask attribute fills model.
-
Hi quasarians,
I am using QInput with a mask for a phone number like this: ‘(###)-###-####’.
I’m using the fill-mask attribute, because I like the feedback it provides as filling the mask.
However the fill-mask attribute fills the model even when the you have typed nothing in the QInput.
I have regex validation on my backend and this is causing me problems.
I know probably this is the expected behavior to fill the model, but it would be cool to not fill the model and have the input guiding that the fill-mask attribute provides.
Any help is really appreciated, thanks in advance!
Here is a codepen:
https://codepen.io/danielcommesse/pen/MWYVyxw?editable=true&editors=101 -
@danielcoliev it doesn’t fill the model, even the codepen shows that. provide a reproduction codepen that simulates your issue.
-
@metalsadman Initially it doesn’t, but focus any input and type a letter, as the mask is only accepting numbers, it won’t fill the mask but the model will be filled with the mask and mask tokens replaced by ‘_’.
For my frontend validation I require that input inputs are touched (vuelidate touched), so in my forms if the user submits the form, the QInputs are touched (vuelidate touched) and the models are filled, messing with my backend validation, as it expects null values or values that complies with the mask regex (I transform the mask to regex in my backend).
-
@danielcoliev make a custom validator then and remove the mask characters.
-
I updated the codepen to make it more clear.
-
@danielcoliev use
unmasked-value
. https://codepen.io/metalsadman/pen/abzYmag?editable=true&editors=101 -
@metalsadman Oh yes, it works!!!, damn Quasar is absolutely great!!!
Thank you very much @metalsadman.