Dynamic mask not working with ngx-mask

[adiprasanna]

I have a directive that takes type as an input. Depending on the type provided, the directive applies mask on the input text box. For example, if type is TN, it applies (999) 999-9999. I am setting the mask as below.

this.elementRef.nativeElement.setAttribute('mask', '(999) 999-9999');

All other regular html attributes work fine with setAttribute. The mask is not getting updated with this. Is there a way to notify ngx-mask that the mask on this input box needs to be re-applied?

[adiprasanna]

Any update on this? Need help here. Is there a way to dynamically set the mask from a directive?

[brunocicom]

Have you seen this issue?

[adiprasanna]

Hi Brunocicom,

I have seen the issue. However, that issue is just about making mask dynamic with a variable in the html. In my case, the mask is determined in a directive defined for the text box. I am trying to set the mask from within the directive. Example as below.

<input type="text" [(ngModel)]="myModel" my-field config="type:TN"/>

Here, my-field is my directive and config is an input parameter that takes few configuration parameters. Depending on the type being passed, the mask will be determined in my-field directive.

Is there a way to do that?

[brunocicom]

Hi @adiprasanna I don't known..

[adiprasanna]

ok. The problem is that when mask is applied to the nativeElement of ElementRef of the text box, it doesn't reflect on the screen.

this.elementRef.nativeElement.setAttribute('mask', '(999) 999-9999');

The browser just recognizes that a new attribute - "mask" has been set but doesn't know how to interpret that new attribute, as it's not a html attribute. The ngx-mask library is also not notified about the change.

I don't feel this issue is closed. Can someone re-open this for me please? If a issue is already fixed, please let me know the solution.

[ghost]

Did you find a solution to this? Still experiencing issues when using setAttribute to dynamically set a mask in an html input.

[davidhenley]

+1

[GuiAlmeida]

+1

[Xambey]

+1

[nutman]

This is an important issue for the community

[Xambey]

this also doesn't work when setting the mask through the properties of the directive like:

<ng-container *NgTemplateOutlet="someTemplate"></ng-container>
....
<ng-template #someTemplate>
....
    <input type="text" [(ngModel)]="someState" [mask]="someDynamicChangingProperty" />
</ng-template>

[nutman]

this also doesn't work when setting the mask through the properties of the directive like:

<ng-container *NgTemplateOutlet="someTemplate"></ng-container>
....
<ng-template #someTemplate>
....
    <input type="text" [(ngModel)]="someState" [mask]="someDynamicChangingProperty" />
</ng-template>

@Xambey Could you clarify the version of the package? We have tested it locally and it works. Or share more code to help us understand the issue

[ghost]

Re. #487. I found a workaround a while back. https://github.com/JsDaddy/ngx-mask/issues/487#issuecomment-517017922

[adiprasanna]

Hi @patrickbaciu,

The workaround you mentioned in #487 is using data binding of Angular to set mask. In my case, that will need to be determined dynamically in a directive (not a component) and data binding doesn't work with directives. The only way is to access the HTML element through this.elementRef.nativeElement and change it's attribute or property. When this is changed, it's not being recognized by ngx-mask.

Hi @nutman,

I am using version 7.0.1 of ngx-mask.

[lcnvdl]

I have the last version (9.0.2), but I'm still having this issue.

[NepipenkoIgor]

Please try latest version

[memartinez06]

You can create a separate component with your input element and pass the mask as a parameter:

child component html:

<div [formGroup]="parentForm"> <input [mask]="mask" class="form-control" type="text" [formControlName]="'identification'"> </div>

child component ts: @Input('mask') public mask:string = "";

Parent component html: <app-dynamic-input [mask]="dynamicMask" [parentForm]="caseForm"></app-dynamic-input>

Parent component ts: this.dynamicMask = "HERE YOUR DYNAMIC MASK";

[ojpbay]

Is the component / binding the only option?

Example of what I would 'like' to do in a directive is shown here but, as people have mentioned, setting the attributes centrally in a directive is not working - I've tried different lifecycle hooks in the directive to no avail.

ngx-mask - stackblitz directive

[sofiaps]

Hi @ojpbay ! This is exactly what I was trying to do, but haven't had any luck so far... Did you manage to find a solution?

[ojpbay]

@sofiaps I ended up with a custom component with an input for the 'mode' I wanted.

Template:

<input [mask]="mask" />

Component:

public get mask(): string { let retVal = '';

switch (this.mode) {
  case 'currency': {
    retVal = this.inputService.currencyMask;
    break;
  }
  case 'weight':
  case 'number': {
    retVal = 'separator';
    break;
  }
  case 'integer': {
    retVal = 'separator.0';
    break;
  }
  default: {
    retVal = 'separator.4';
    break;
  }
}

return retVal;

}