Is a dynamic Input Mask achievable?

Hi there

I’ve been trying to make a sort of dynamic input mask that changes based on user input.

Expected:

1. If the first keydown is a word, it should render Canada Postal Code mask.

2. If it is a number, renders USA Postal Code mask.

Actual:

The input doesn’t get updated with the new mask.

I also prepared a StackBlitz for this: https://stackblitz.com/edit/angular-9sr8ok?file=src/app/mask-sample-5/mask-sample-5.component.html

Hello Jacky Nguyen,

Thank you for making a post to our forum and sharing the reproducible sample.

This is just a short notice that we received your inquiry and that we are under investigation about your issue. If we have an update, I'll let you know. So could you wait for a while?

Thank you in advance.

Thanks, let me know if you need more information on this case.

Hello Jacky Nguyen,

Thank you for sharing the sample. We investigated it and it turns out that it won't work because Angular does not make deep checks for @Input values. It means that Angular only compares primitives by value and coumpound types by reference. Therefore, changing the value of the currentMask does not trigger change detection because its reference is still the same.

Here are a modified sample: https://stackblitz.com/edit/angular-9sr8ok-nwcyer

I hope this will help.

Hi there,

Thank you for your response.

The modified sample is not correct for my use case, plus I deep clone `currentMask` at the following line:

        this.currentMask = JSON.parse(JSON.stringify(newMask)); // Angular should do a deep check.

By my investigation, I think the igxMask can't be updated after the parent component ViewInit, you can see it quite clearly in your modified sample, try clicking `Change mask` and focus on the input, the mask is still the same mask as before.

Hello Jacky Nguyen,

Thank you for pointing out. I just saw that the placeholder was changed and wrongly considered that it worked as well as for the mask. Sorry for that.

Receiving the indication, we made more investigation and it has turned out that we don't support changing mask pattern after it is initialized.

Sorry to bother you, but could you submit a bug or a feature request to our GitHub site https://github.com/IgniteUI/igniteui-angular/issues if this feature is very important for you? Submitting your idea will allow you to communicate directly with our product management team and track the progress of your idea at any time.

Thank you in advance to making a submit.