angular - 在 Angular 9 中的输入字段上创建数字格式化程序

Question

您好，我正在尝试在输入字段上创建数字格式化程序。

当我输入数字时效果很好，但是当我输入其他字符时，NgModel 似乎不关心我的更改，一旦我再次输入数字，所有非数字字符都会再次消失。有人可以帮我吗？

想要的行为 -> 输入：“dawdhawdhwa”，输出：“0kr”

输入：“50000”，输出：“50 000 kr”

输入：“5219319231”，输出：“5 219 319 231 kr”

输入：“dawh2133kdaw5”，输出：“21 335 kr”

源代码：

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 {
  }
}

标签： angularformatnumberspipe