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

Question

在我的 Angular 10 项目中，我有一些

mat-form-fields

和

<input type=number>

，我想为其添加千位分隔符。

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

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

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

• ngx-mask 库，当我将输入类型更改为 tel 时工作正常，但当输入类型为数字时则不行。
• 编写我自己的角度指令，在用户键入时更改输入，但我实际上无法做到。因为输入类型=数字中不允许使用逗号，并且只要指令尝试插入逗号，它就会删除输入值。

这是我输入的

.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

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

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

它使用文本输入但返回数字值。

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

Answer 2

Angular（实际上是 html 本身）不允许您在输入 type="number" 中使用千位分隔符。 然而，总有一些解决方法，允许您仍然使用特定类型的输入，并且仍然可以直观地看到分隔符

<mat-form-field>
   <mat-label>Quantity</mat-label>
      <input [style.display]="showElement?'none':''" matInput type="number" [(ngModel)]="Quantity" (focusout)="showElement=!showElement">
      <span [style.display]="showElement?'':'none'" (click)="showElement=!showElement">{{Quantity | number:'.'}}</span>
</mat-form-field>

在您的 .ts 文件中只需声明以下内容：

showElement: boolean = false;

现在在视觉上它给你千位分隔符

当你点击它时，它仍然使用输入类型=“数字”

Answer 3

你有十进制管道（角内置管道）。

它应该看起来像这样：

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

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