Angular 10 <input type=number> 千位分隔符

Question

在我的 Angular 10 项目中，我有一些 mat-form-fields 和 <input type=number> 我想添加千位分隔符。

意思是，当用户输入数字时，程序应该每三位数字插入逗号，而不是在浮动部分。

因此，例如，如果用户正在键入 1200.5869，则用户在键入时应该会在输入字段中看到此数字：1,200.5869. （顺便说一句，这在加密货币交易网站中很常见。）

到目前为止我尝试过的事情：

ngx-mask 库，当我将输入类型更改为 tel 但不是数字时，它工作正常。
编写我自己的 angular 指令，在用户输入时更改输入，这我真的做不到。因为输入 type = number 中不允许使用逗号，并且只要指令尝试插入逗号，它就会删除输入值。

这是我输入的.html代码：

<mat-form-field appearance="outline">
    <mat-label>amount</mat-label>
    <input
      type="number"
      matInput
      [min]="0.1"
      [step]="0.1"
      formControlName="quantity"
    />
    <span matSuffix>
      USDT
    </span>
</mat-form-field>

Answer 1

您有小数竖线（angular built-in 竖线）。

它应该看起来像这样：

{{ value_expression | number [ : digitsInfo [ : locale ] ] }}

你可以仔细看看angular API:https://angular.io/api/common/DecimalPipe

Answer 2

我已经实现了类似的功能。

我使用 ControlValueAccessor 创建自定义输入。

它使用文本输入，但 returns 一个数字值。

https://npmjs.com/package/ng-number-input

Angular 10 <input type=number> 千位分隔符

Angular 10 <input type=number> thousand separator

input-mask

angular-material

angular