No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    [Solved] QInput fill-mask attribute fills model.

    Help
    mask q-input
    2
    7
    1066
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • danielcommesse
      danielcommesse last edited by danielcommesse

      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

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @danielcommesse last edited by metalsadman

        @danielcoliev it doesn’t fill the model, even the codepen shows that. provide a reproduction codepen that simulates your issue.

        1 Reply Last reply Reply Quote 0
        • danielcommesse
          danielcommesse last edited by

          @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).

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @danielcommesse last edited by

            @danielcoliev make a custom validator then and remove the mask characters.

            1 Reply Last reply Reply Quote 0
            • danielcommesse
              danielcommesse last edited by

              I updated the codepen to make it more clear.

              metalsadman 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @danielcommesse last edited by metalsadman

                @danielcoliev use unmasked-value. https://codepen.io/metalsadman/pen/abzYmag?editable=true&editors=101

                1 Reply Last reply Reply Quote 1
                • danielcommesse
                  danielcommesse last edited by

                  @metalsadman Oh yes, it works!!!, damn Quasar is absolutely great!!!

                  Thank you very much @metalsadman.

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post