Угловой 10 ‹input type=number› разделитель тысяч

В моем проекте Angular 10 у меня есть несколько mat-form-fields с <input type=number>, к которым я хочу добавить разделитель тысяч.

Это означает, что когда пользователь вводит число, программа должна вставлять запятые каждые три цифры, а не в плавающую часть.

Так, например, если пользователь вводит 1200,5869, он должен видеть это число в своем поле ввода при вводе: 1,200,5869. (кстати, это очень распространено на сайтах по торговле криптовалютой).

Вещи, которые я пробовал до сих пор:

  • библиотека ngx-mask, которая отлично работает, когда я меняю тип ввода на тел, но не когда это номер.
  • написание моей собственной директивы angular, которая изменяет ввод по мере того, как пользователь печатает, чего я действительно не мог сделать. потому что запятые не допускаются в типе ввода = число, и он просто удалял бы входное значение всякий раз, когда директива пыталась вставить запятую.

Это мой входной код .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>

angular angular-material input-mask
person Newsha Nik    schedule 07.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас есть десятичная труба (угловая встроенная труба).

Это должно выглядеть примерно так:

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

Вы можете более подробно ознакомиться с angular API:https://angular.io/api/common/DecimalPipe< /а>

person Ronielo    schedule 07.10.2020
comment
Это верно, но не отвечает на вопрос. Вопрос в том, как я могу отформатировать значения за тегом ввода? Как можно применить десятичную вертикальную черту к входному тегу? - person Mark Glass; 24.06.2021