Формат Currency в неударе в лунку Angular2

Когда мы хотим форматировать как монета этикетку в Angular2, мы используем Пипе Курренси:

<p>{{cantidad | currency}}</p>

Это функционирует в совершенство, но если то, что мы хотим, состоит в том, чтобы пользователь поместил количество денег в неудар в лунку: как мы делаем для того, чтобы он форматировался правильно?

То, что он захотел бы, что-то как это (этот пример не функционирует, конечно):

<input [(ngModel)]="cantidad | currency"></ion-input>

И ожидаемое поведение состояло бы в том, чтобы, хотя пользователь набьет "10,2", когда неудар в лунку потеряет фокус в неударе в лунку, были видны "10,20€", и в model давайте иметь "10.2".

Заметь: я знаю, что он мог бы отделять с одной стороны [ngModel] = "количество" и с другой стороны манипулировать событием (change) или (ngModelChange), но он искал более элегантное и удобное решение.

Большое спасибо

6
задан 13.04.2017, 00:10
3 ответа

Не используй [(ngModel)]. В Вашем месте используй событие (change) и признак [value], чтобы контролировать вручную стоимость.

<input [value]="cantidad" (change)="updateValue($event.target.value)">

В твоем компоненте ты должен иметь тогда что-то как это

import {formatCurrency, getCurrencySymbol} from '@angular/common';

....

updateValue(value: string) {
    let val = parseInt(value, 10);
    if (Number.isNaN(val)) {
      val = 0;
    }
    this.cantidad = formatCurrency(val, 'en-US', getCurrencySymbol('USD', 'wide'));
}

BГЎsicamente estГЎs bindeando стоимость неудара в лунку по отношению к переменной твоего компонента, который ты обновляешь вручную каждый раз, когда есть изменение в контроле. Стоимость ты обновляешь точно despuГ©s, который пользователь заканчивает писать.

рекомендуемый, что ты использовал функции, которые приходят включенные в Углового для управления монет используя internacionalizaciГіn, так как во всех культурах она posiciГіn монеты он не идет в том же месте.

4
ответ дан 24.11.2019, 12:15

Во-первых, я рекомендую тебе формульных реактивов Углового , так как они позволяют тебе приносить ее lГіgica и управлять об изменениях состояния в стороне компонента, вместо внутри HTML.

, Если ты хочешь продолжить использовать ngModel, лучшее состоит в том, чтобы делать одну CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR в форме Директивного органа, который назывался бы currencyMask, и внутри директивного органа ты соглашаешься на события onBlur и onFocus посредством @HostListener. Например:

  typescript
  @HostListener('focus', ['$event.target.value'])
  onfocus(value, target) {
    // [...]
  }

тоскливее, хотя она позволяет тебе считать стоимостью Number в компоненте и изменять "фасад" стоимости. AsГ, - когда ты сделаешь focus прощения долга кредитором все виды форматирования, и когда ты сделаешь blur, ты форматируешь для того, чтобы видели, как ты желал, не меняя твоей модели в стоимость, которая не была бы vГЎlido.

Это bГЎsicamente - то, что делает https://github.com/cesarrew/ng2-currency-mask , например.

1
ответ дан 24.11.2019, 12:15

измени ngModel в этикетке, чтобы мочь использовать pipe

<input [ngModel]="cantidad | currency">
0
ответ дан 24.11.2019, 12:15