Ngx-mask: Optional character in mask

[chrisbenseler]

Is it possible to have an option character in the mask?

Example, in Brazil the phone numbers can be (11) 1234-1111 or (11) 12349-1111. In other words, the "mask" is (00) 0000?-0000 where "?" is an optional character. Is it possible to achieve this with the library?

[wolfywoof]

As long its strictly numbers, 9 will work.

So the mask will be (00) 00009-0000

[thiagog3]

It's not working. When you use a smaller number the dash character continues on wrong position.

[wolfywoof]

Can you give an example of the mask you're using, the input you type in, expected input, and results?

Thanks

[thiagog3]

I'm using this mask: "(00) 00009-0000"
I'm typing this value: "2433239825"
I'm getting this result: (24) 33239-825
I'm expecting this result: (24) 3323-9825

Like @chrisbenseler said before, in Brazil the phone numbers can be with 10 or 11 characters.

[wolfywoof]

Ah I see, the behavior you expect to have it ignore optional characters until the end and then it pushes everything to the left if you insert more.

If you type 243323-9825, it will skip the optional character and show up as (24) 3323-9825. It would be more apparent if you used clearIfNotMatch since it would clear the input if it wasn't (24) 3323-9825 or (24) 33232-9825, but I don't think clearIfNotMatch currently works with the optional 9 mask right now.

Anyway, looks like an enhancement?

[thiagog3]

I think it's a half bug. Cause when I prompted a smaller number with "clearIfNotMatch" setted true all data is cleared. I have no time in this exact moment to contribute with this but I can take a look on this point at this weekend. What do you think?

[wolfywoof]

Sounds like a plan.
For the clearIfNotMatch issue, take a look at one of my pull requests.
Thanks!

[NepipenkoIgor]

@thiagog3 @wolfywoof @chrisbenseler Hi , we added support for optional ? character . Please try latest version

[KinjalAkhani]

Is it possible to have an option character '#' in the mask as i want to add it in color picker functionality.

[andrezappe]

@thiagog3 @wolfywoof @chrisbenseler Hi , we added support for optional ? character . Please try latest version

How could I use option '?' character in the mask with this type of result?

I'm using this mask: "(00) 00009-0000"
I'm typing this value: "2433239825"
I'm getting this result: (24) 33239-825
I'm expecting this result: (24) 3323-9825

[bsrafael]

Any updates on this issue?
I have the exact same situation.
@andrezappe

[victorlucss]

Any updates? I have the same situation!

[bsrafael]

@victorlucss
Any updates? I have the same situation!

I've ended up creating a dynamic mask.

Create a phone object which carries a mask expression and the typed value. Then, create a function bound to input keyup event to detect typed phone length and change the mask expression accordingly. It will be useful if you also create functions to clear your masked phone string and to re-assemble it whenever needed.

Here is my method to change mask based on a "phones" array containing a "phone" (unmasked input) value:

changePhoneMask(i) {
    let val = this.phones[i].phone;
    if (val.replace(/\D/g, '').substring(0,4) == "0800"){
        this.phones[i].phoneMask = '0000 000 0000';
   } else {
        if (val.replace(/\D/g, '').length === 11) {
            this.phones[i].phoneMask = '(00) 0 0000-0000';
        } else {
            this.phones[i].phoneMask = '(00) 0000-00009';
        }
    }
}

This is just one approach. It is likely that you will need to adapt it to match your own data structure. Also, it is likely that there are better ways to solve this issue.
Hope it helps!

[ASOEstudio]

Thinking of a dynamic way to change the mask like @bsrafael, I created a slightly simplified solution.

html --
<input formControlName="phone" mask="{{ maskPhoneNumber }}" [validation]="true" (keyup)="switchPhoneMask(contactForm.get('phone').value)">

ts --
this.contactForm = this.formBuilder.group({ phone: ['', Validators.compose([ Validators.required, Validators.minLength(10), Validators.maxLength(11) ]) ] });

public switchPhoneMask(phone: number) { if (phone.toString().length > 10) { this.maskPhoneNumber = '(00) 0 0000-0000'; } else { this.maskPhoneNumber = '(00) 0000-00009'; } }

Hope it helps!

[schneiderjnt]

That is Brazil cost! I could do it straight in HTML:

<input type="text" [(ngModel)]="user.phoneNumber" mask="{{user.phoneNumber.length <= 10?'(00) 0000-00009':'(00) 00000-0000' }}">

Hope it helps

[thiagoalmedeiros]

I have a similar problem. My mask is : '00 00 00 99 99 99 99 99 99 99' and number and spaces are in the wrong positions. Did anyone have the same problem? My version is 8.2.0 but I also tested it on the latest version (9.0.2).