Angular mask currency - problems with K for thousands and M for millions

I have an angular mask for currency input defined like this:

public currencyInputMask = createMask({
alias: 'numeric',
groupSeparator: ',',
digits: 0,
digitsOptional: false,
prefix: '$ ',
placeholder: '',
parser: (value: string) => {
let result = value.replace(/[^0-9.-]+/g, "");
let returnVal = (result && !isNaN(+result)) ? parseInt(result) : '';
return returnVal;
}
});


Inside a component I am using it like this:

<mat-form-field class="blueInput" fxFlex>
<mat-label>Cash (Checking Accounts/Savings Account)</mat-label>
<input matInput formControlName="cashControl" [inputMask]="currencyInputMask" autocomplete="off">
</mat-form-field>


Everything works nice and I read the value from the control like this cashControl.value. I've discovered that if I press K or M the control adds 000 for thousand and 000,000 for million and this is awesome. The problem is that these stay at the UI level and doesn't show up into my control value. My question is what do I have to do to reflect the UI value intro the control value. I use angular 14.

Demo on: https://stackblitz.com/edit/angular-ivy-vbpagt

Continue reading...