Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Murat Qaral
50
igxMask not working as expected
posted

This is my mask which is (966) ##### #### (966 is phone area code) and this mask is shown as expected.

But when I click on input all # symbols and number 9 are disappearing.  

What I need is, the numbers I preset to keep their values. I guess this is occuring because of Built-in Mask Rules. Both number 9 and # are assigned as rule. And perhaps that's why they are disapperaing.

How can I achieve this?

  • 1560
    Offline posted

    Hello,

    I have been looking into your requirement and after an investigation, I determined that the reason why the digit 9 is represented as a fillable spot is because it is treated as a special character, exactly as you suggested. There are two approaches I can suggest to you in order to work around this behavior.

    1. In case the code (966) won't be changed you can set is as prefix:

    <igx-input-group>
    <igx-prefix>
        <igx-icon>phone</igx-icon>
    </igx-prefix>
    <igx-prefix>(966)  </igx-prefix>
    <label igxLabel>Phone</label>
    <input igxInput type="text" 
     [igxMask]="'##### ####'"/>
</igx-input-group>

    1. The input has promptChar property which sets the character representing a fillable spot in the input mask. Default value is "'_'". If you replace it with 9, the first 9 digit would be visible, however, all fillable spots would be 9 as well.

    <input igxInput type="text" [promptChar] = "'/9'"
     [igxMask]="'(966)##### ####'"/>

     Additionally, I have logged this behavior in our GitHub repository and you can view the issue here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team. 

    In order to receive a notification whenever a new information is available please make sure that you are subscribed to the issue. This can be achieved via the “Subscribe” button.

    Let me know if I may be of any further assistance.

    Sincerely,

    Teodosia Hristodorova

    Associate Software Developer