When dealing with a text box, I encounter an issue where I need to adjust the mask format based on user input and clear the text box. However, changing the mask format does not result in the text box being cleared. Conversely, removing the mask format condition allows for successful clearing of the text box.
html
<input type="text" mask="{{maskFormat}}" [(ngModel)]="empId" />
<button (click)="toggleMask()">Change Mask</button>
TS
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
maskFormat: string = '000';
empId: string;
toggleMask(): void {
if (this.maskFormat.length == 3) {
this.maskFormat = "000000";
}
else {
this.maskFormat = "000";
}
this.empId = "";
}
}
Note: The ngx-mask package is being utilized