Ngx-mask: Additional non-default special characters are not being registered by the specialCharacters attribute

[Wikster2012]

Title says it all really. In trying to create this input box

<input name="phone"
       placeholder="[phone] x9999"
       class="form-control pl-2"
       type="text"
       specialCharacters="['(', ')', '-', 'x']"
       [dropSpecialCharacters]="false"
       mask="[phone] x9999"/>

I've registered the special characters I need this particular mask to recognize and use. All of them but x are supported by default.

I wasn't sure if using the specialCharacters attr tag to define my array would overwrite the default list of characters or append characters to it. So to be safe I added all the characters I needed despite them being supported by default. But trying specialCharacters="['x']" also did not work.

The behaviour I am seeing with my input is that the mask works as expected up until I reach the point where x should be. At that point my input contains something like, "[phone] " and then input will not display the x character or let me type any additional numbers.

As "x" is a valid entry for masks using the A or S pattern codes, I figured it would be fair if we were restricted from registering valid character inputs as special characters.

So I also attempted to use specialCharacters="['#']" for a mask defined as mask="[phone] #9999" for the appearance of "[phone] #1234" but using # a symbol instead of x a potentially valid mask input also did not work.

*edited to remove presence of country code as I've gone in a different direction for handling it that does not require it to be present in a mask.

[Wikster2012]

I've come to discover the issue was due to two things. First, that specialCharacters needs to be wrapped in [ ]. It is not wrapped in the documentation.

Second, if the specialCharacter attribute is going to be used then all special characters intended to be used, even characters supported by default, need to be listed in the array. This is also not explained in the documentation.

My input ended up having to be formatted in this way to work

<input name="phone"
       placeholder="[phone] #9999"
       class="form-control pl-2"
       type="text"
       ngModel
       (ngModelChange)="updatePhone($event)"
       [specialCharacters]="[ '(', ')', ' ', '-', '#' ]"
       [dropSpecialCharacters]="false"
       mask="[phone] #9999"/>

Perhaps the documentation could more explicitly cover the use of the specialCharacters attribute? At the very least change it to show the attribute wrapped in brackets, and explain that by using the attribute, all special characters you intend for your mask to use will have to be defined, even characters supported by default.

[jonathanantoine]

Thanks a lot for sharing your knowledge, this saved me a lot of time. I created a Pull Request to ask for a doc update : https://github.com/JsDaddy/ngx-mask/pull/285