Hello im trying to create a number formatter on a input field.
It works great when im typing numbers, but when i type other characters it seems like the NgModel dont care about my changes, and as soon as I type a number again all of the non digit characters disappears again. Can someone help me out?
wanted behaviour -> input: "dawdhawdhwa", output: " 0kr"
input: "50000", output: "50 000 kr"
input: "5219319231", output: "5 219 319 231 kr"
input: "dawh2133kdaw5", output: "21 335 kr"
Source code:
import { Component, Input, PipeTransform, Pipe } from '@angular/core';
@Pipe({
name: 'numberFormat'
})
export class NumberFormatPipe implements PipeTransform {
transform(value: any, args?: string[]): any {
if(!value) {
value = "0";
}
value = value.replace(/[^0-9.]/g, "");
return parseFloat(value as string).toLocaleString('sv') + (args ? args[0] : "");
}
}
@Component({
selector: 'app-input',
template: `
<div >
<input
[ngModel]="value | numberFormat: [' kr']"
(ngModelChange)="value = $event"
type="text"
/>
</div>
`,
})
export class InputComponent {
value: string
constructor() {
}
ngOnInit(): void {
}
}