Ngx-mask: Using setAttribute to dynamically set mask on input not working

[patrickbaciu]

I am trying to set a mask on an html element dynamically using the setAttribute method.

The mask, ex. "0000-000-000-SS" is not being enforced by the input when set dynamically.

The html element appears to be created correctly, with the mask attribute present, but there is no "ng-reflect-mask-expression" created in the html input element when dirtied. However when setting the mask attribute directly from the component html the attribute is added to the input upon being dirtied.

This is the dirtied-non-dynamic input. As you see there is an attribute for ng-reflect-mask-expression, indicating that the module is working correctly.

This is the dirtied-dynamic input. There is no attribute for ng-reflect-mask-expression, indicating an error with the mask enforcement.

Has anyone experienced this issue, and if so, is there a solution?

I am using Angular 7, and the latest version of ngx-mask.

[NepipenkoIgor]

Hi @patrickbaciu . Thanks

In fact, once we start data binding, we are no longer working with HTML attributes. We aren't setting attributes. We are setting the properties of DOM elements, components, and directives.

Also angular don't sync property in this way

Solution for you use binding syntax

<input [mask]="myProp" />

in component where you need 
.... 
 this.mask = 'new mask' 
.... 

[patrickbaciu]

@NepipenkoIgor I don't think you understand my issue. We are not simply changing the mask property of an already existing DOM element. I am creating a DOM from within my component, so binding syntax is not an option. Ideally I would like to do something like this:

var maskedTextElement = document.createElement('input'); maskedTextElement.setAttribute('mask', "0000-000-000-SS");

Look at #365, looks like the same issue is not resolved.

[davidhenley]

Why is this closed?

[patrickbaciu]

The workaround seems to be dynamically generating components using a component factory with static html and property bindings, rather than dynamically generating the DOM elements themselves. This is because the directives allowing the Javascript behind the DOM element to work(and set the mask), are created at compile time and simply adding the element to the DOM any other time in the lifecycle of the app will not allow the directives to function properly. My team and I also switched to a different Masked Text Box: the Kendo UI masked text box by Telerik. Hope this helped.

[Prinsn]

@NepipenkoIgor Could you confirm that you can use [mask] on input?

Can't bind to 'mask' since it isn't a known property of 'input'. ("
           [ERROR ->][mask]="masker"
           >

[cdtapay]

@NepipenkoIgor Could you confirm that you can use [mask] on input?

Can't bind to 'mask' since it isn't a known property of 'input'. ("
           [ERROR ->][mask]="masker"
           >

Try adding NgxMaskModule.forChild() to your child module.