Угловой 4 валютный канал с полем ввода

Question

У меня есть поле ввода, которое я хотел бы отображать правильное форматирование валюты при вводе данных от веб-пользователя (USD) ...

Небольшой фон для этого, предыдущая маска ввода, которую я использовал, будетначало назад (пример: если пользователь вводит 10, а не показывает 10 долларов, он показывает 0,10 ... поэтому, если пользователь хочет отобразить 100,00 долларов, ему нужно будет ввести 1 и 4 нуля, чтобы достичь этого ...)

Прыгая вперед, туда, где я нахожусь сегодня ... Я хочу иметь возможность ввести «10» в поле ввода, а затем отобразить его в реальном времени в поле ввода в качестве правильного формата валюты USD.: $ 10,00.

<div class="col-6 col-sm-6 col-md-2 col-lg-1 form-group" *ngIf="configuration.is_item_price_and_total_visible;">
     <mat-form-field floatLabel="never">
       <input matInput type="text" placeholder="Price" [(ngModel)]="selected_item_price | currency:'USD' (ngModelChange)="selected_item_price=$event" name="price">
     </mat-form-field>
</div>

Answer 1

Вы не можете использовать операторы выражений шаблонов (труба, сохранить навигатор) в шаблонных государствах.т.е. [ngModel] = "selected_item_price | currency: 'USD'"

попробуйте выполнить синтаксический анализ свойства входного значения, например

<div class="col-6 col-sm-6 col-md-2 col-lg-1 form-group" *ngIf="configuration.is_item_price_and_total_visible;">
      <mat-form-field floatLabel="never">
       <input matInput type="text" placeholder="Price" [value]="selected_item_price| currency:'USD':true:'1.0-2'" [(ngModel)]="selected_item_price" name="price">
      </mat-form-field>
</div>

Answer 2

Вам необходимо разделить привязку на одностороннюю привязку [ngModel]="selected_item_price | currency:'USD'" и привязку события (ngModelChange)="selected_item_price=$event", поскольку каналы работают только с односторонней привязкой.

<mat-form-field floatLabel="never">
  <input matInput type="text" placeholder="Price" [ngModel]="selected_item_price | currency:'USD'" (ngModelChange)="selected_item_price=$event" name="price">
</mat-form-field>

Вы также можете использовать (blur)="selected_item_price = $event.target.value" и (keyup)="selected_item_price = $event.target.value" события для обновления selected_item_price после удаления () из ngModel