Issue
I'm using text-mask lib and it works pretty well.
Consider the following configuration of mask:
priceMask = Object.freeze({
mask: createNumberMask({
allowDecimal: true,
decimalSymbol: ',',
integerLimit: 7,
prefix: '',
thousandsSeparatorSymbol: '.'
})
});
In my HTML, I have the following:
<form [formGroup]="formGroup">
<input type="text"
formControlName="maskedInput"
[textMask]="priceMask">
</form>
As you may have noticed, in my mask configuration I'm limiting a field to have a value like this:
9.999.999,99
However, while I want to display this specific format to the user, I'm wanting to get a different value in my control
, something like:
9999999,99
Is this possible?
I hope the question is clear enough. Thanks.
Here's a plnkr that I created to illustrate the situation.
Solution
I'd create a directive for this:
@Directive({ selector: '[numeric]' })
export class NumericDirective {
constructor(private readonly model: NgControl) {}
@HostListener('input') inputChange(): void {
const newValue = this.model.value.replace(/\./g, '');
this.model.control.setValue(newValue);
this.model.valueAccessor.writeValue(newValue);
}
}
And in HTML, just include numeric
attribute:
<form [formGroup]="formGroup">
<input numeric
formControlName="maskedInput"
[textMask]="priceMask">
</form>
Answered By - developer033
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.