Dynamic mask based on value length

[marcosrocha85]

What problem you are trying to solve?
I'm trying to implement a mask that allows user to type a phone number. Here in Brazil for mobile numbers we have what we call "9th digit" which is a 9 added in front of the phone number, making the string to be like (11)987654321 for mobile and (11)87654321 for fixed numbers. I'm trying to achieve that with IMask.

Describe the solution you'd like
I don't found something at Docs that could lead me to do that. If documentation had an example to achieve string variable mask based on value length it could be great. Also, I think is important to have the possible "options" table for each mask type, because I couldn't find where startsWith or country comes from docs.

Describe alternatives you've considered
I tried using IMask.MaskedFunction and IMask.MaskedDynamic with no success.

[uNmAnNeR]

you can probably use
(00)00000000[0]

or

[
  { mask: '(00)00000000' },
  { mask: '(00)000000000' }
]

[hiagodotme]

@uNmAnNeR i tried, but without success. What am I doing wrong?

I'm using Vue3.

<input
       id="document"
       name="document"
       type="text"
       required
       inputmode="numeric"
       v-imask="[{mask: '000.000.000-00'}, {mask: '00.000.000/0000-00'}]"
       v-model="form.documento" />

[uNmAnNeR]

v-imask="{ mask: [...] }"

[hiagodotme]

@uNmAnNeR i tried with the example mentioned before opening the issue, I just forgot to inform:

<input
       id="document"
       name="document"
       type="text"
       required
       inputmode="numeric"
       v-imask="{ mask : [{ mask: '000.000.000-00' }, { mask: '00.000.000/0000-00' }] }"
       v-model="form.documento" />

With the example above it always applies the first mask of the vector.

[renerlemes]

And how to use with dynamic mask? If I input 123.456.789-01 and input 2, the result should be 12.345.678/9012-

Always applies the first mask of array. When the input value is the same length of first value of array, the mask stop work!

[kmefeu]

Question: Issue with Mask for International Phone Numbers

Hi, I'm trying to create a mask for both domestic and international phone numbers using the following setup:

[
  { mask: "+ {00} (00)0000-0000" }, // Not working, the "+" sign always appears even when it's not an international number.
  { mask: "(00)0000-0000" }, // Works fine.
  { mask: "(00)00000-0000" }, // Works fine.
]

The issue I'm facing is that the + sign is always shown, even when the number is not international. How can I conditionally show the + sign only for international numbers?

Any help would be appreciated! Thanks!

[fabriciosouzza]

Try change the order of your numbers, like:

[
{ mask: "(00)0000-0000" },
{ mask: "(00)00000-0000" },
{ mask: "+ {00} (00)0000-0000" },
]

[kmefeu]

@fabriciosouzza Thank you, it worked perfectly! I just added one more option

    { mask: "(00)0000-0000" },
    { mask: "(00)00000-0000" },
    { mask: "+ {00} (00)0000-0000" },
    { mask: "+ {00} (00)00000-0000" },