Is there a way to dynamically format input as USD currency while typing? The input should have 2 decimal places and populate from right to left. For example, if I type 54.60 it should display as $0.05 -> $0.54 -> $5.46 -> $54.60. I found this PLUNKER that achieves this using AngularJS, but I'm looking for a solution in a different framework. This is what my directive currently looks like:
import {Directive, Output, EventEmitter} from '@angular/core';
import {NgControl} from '@angular/forms';
@Directive({
selector: '[formControlName][currency]',
host: {
'(ngModelChange)': 'onInputChange($event)',
'(keydown.backspace)':'onInputChange($event.target.value, true)'
}
})
export class CurrencyMask {
constructor(public model: NgControl) {}
@Output() rawChange:EventEmitter<string> = new EventEmitter<string>();
onInputChange(event: any, backspace: any) {
// remove all mask characters (keep only numeric)
var newVal = event.replace(/\D/g, '');
var rawValue = newVal;
var str = (newVal=='0'?'0.0':newVal).split('.');
str[1] = str[1] || '0';
newVal= str[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') + '.' + (str[1].length==1?str[1]+'0':str[1]);
// set the new value
this.model.valueAccessor.writeValue(newVal);
this.rawChange.emit(rawValue)
}
}
And here is how it's being used in HTML:
<input name="cost" placeholder="cost" class="form-control" type="text" currency formControlName="cost" (rawChange)="rawCurrency=$event">
Update:
This is the final implementation that worked for me:
onInputChange(event: any, backspace: any) {
var newVal = (parseInt(event.replace(/[^0-9]/g, ''))/100).toLocaleString('en-US', { minimumFractionDigits: 2 });
var rawValue = newVal;
if(backspace) {
newVal = newVal.substring(0, newVal.length - 1);
}
if(newVal.length == 0) {
newVal = '';
}
else {
newVal = newVal;
}
// set the new value
this.model.valueAccessor.writeValue(newVal);
this.rawChange.emit(rawValue)
}