Ngx-mask: Error on Dynamic Mask Change

[tanjuyayak]

Hi,

I am trying to create an input with dynamic mask change behaviour and changing mask over input length . I am sending sample code below. When I enter an input with 14 length first mask is applied correctly but if i remove one char then input value changed itself and delete some characters. And when component opens first time, default mask is not applied. I actually tried many ways to do that. I tried native html input events but cant change mask dynamically. Can anyone help me about it please? I am using [email protected]

{{errorMessage}}

//this is ngOnInit
baseInputComponentOnInit(): void {
//this is reactive forms onvaluechanged
this.controlValueChanges(this.id, (value: string) => {
this.setMask(value);
});

 this.setMask(this.componentValue);
}

private setMask(value: string): void {
if (value && _.isString(value)) {
if (value.length == 14) {
if (this.currentmask != this._dinnersMask) {
this.currentmask = this._dinnersMask;
this.mask$.next(this._dinnersMask);
console.log("_dinnersMask");
}
}
else if (value.length == 15) {
if (this.currentmask != this._amexMask) {
this.currentmask = this._amexMask;
this.mask$.next(this._amexMask);
console.log("_amexMask");
}
}
else if (value.length == 16) {
if (this.currentmask != this._visaMasterMask) {
this.currentmask = this._visaMasterMask;
this.mask$.next(this._visaMasterMask);
console.log("_visaMasterMask");
}
}
else {
if (this.currentmask != this._defaultMask) {
this.currentmask = this._defaultMask;
this.mask$.next(this._defaultMask);
console.log("_defaultMask");
}
}
}
}

private _defaultMask = "9999999999999999";
private _visaMasterMask = "9999 9999 9999 9999";
private _amexMask = "9999 999999 999999";
private _dinnersMask = "9999 999999 999999";

mask$: Subject<string> = new Subject();

[SwapnaliJare]

Hi,
I am also facing same issue I have implemented dynamic mask change on change of selected country.
But it deletes some characters from end of phone number even though mask is changes correctly. Please help out on these.

[brunocicom]

Hi, try some solution like this:

.html:
<input #inpMask type='text' [mask]='mask' (input)='changed(inpMask);' style="text-align: right;" placeholder="Type only number">

.ts:

  //class member
  readonly CPF = 0; //11 digits
  readonly CNPJ = 1; //14 digits
  mask = '';
  maskType: number;

  constructor() {
    this.setMask(this.CPF);
  }

  changed(inpMask: any) {
    const value = inpMask.value;

    if (value.length > 14) {
      this.setMask(this.CNPJ);
    } else {
      this.setMask(this.CPF);
    }
  }

  setMask(type: number) {
    if (type < 0 || type > 1 || type === this.maskType) {
      return;
    }

    this.maskType = type;
    if (type === this.CPF) {
      this.mask = '000.000.000-00999';
    } else {
      this.mask = '00.000.000/0000-00';
    }
  }

[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";