Как добиться ввода типа валюты в angular 5?

Я хочу, чтобы в моем приложении угловой 5 произошло следующее.

У меня есть текстовое окно, где я ввожу числовые значения, как только фокус этого текстового поля теряется, введенные числовые значения должны быть отформатированы в валюта с '$' и ',','.' символы. как этого добиться?

Я хочу показать свои входные числовые значения, как показано на рисунке ниже.

Как добиться ввода типа валюты в angular 5?

🤔 А знаете ли вы, что...
Angular предлагает мощную систему инъекции зависимостей для управления зависимостями и компонентами приложения.


8
32 756
4

Ответы:

Здесь вам нужно преобразовать CurrencyPipe в событие (размытие).

В вашем app.module.ts добавьте провайдера CurrencyPipe.

import { CommonModule, CurrencyPipe} from '@angular/common';
@NgModule({
  ... 
  providers: [CurrencyPipe]
})
export class AppModule { }

App.component.html

Привязать событие onblur к текстовому полю ввода.

<h1>On Focus lost change Format amount</h1>
<input type = "text"(blur) = "transformAmount($event)" [(ngModel)] = "formattedAmount"  />

В вашем файле App.component.ts напишите метод transformAmount($event)

AppComponent.ts

import { Component,ElementRef } from '@angular/core';
import { CommonModule, CurrencyPipe} from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
 formattedAmount;
 amount;
   constructor(private currencyPipe : CurrencyPipe) {
  }

   transformAmount(element){
      this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, '$');

      element.target.value = this.formattedAmount;
  }
}

См. этот Демо

Надеюсь, что приведенное выше решение поможет вам!


Решено

Я нашел способ..! Я установил пакет в своем приложении angular 5, который обеспечивает эту функциональность.

Я сделал таким образом.

npm установить форматирование валюты --save

Код .html выглядит следующим образом:

<input type = "text" [(ngModel)] = "taxableValue" (blur) = "formatCurrency_TaxableValue($event)">
here on blur of text box i am calling «formatCurrency_TaxableValue ($ событие)» function.

Код файла .ts приведен ниже.

formatCurrency_TaxableValue(event)
  {
    var uy = new Intl.NumberFormat('en-US',{style: 'currency', currency:'USD'}).format(event.target.value);
    this.tax = event.target.value;
    this.taxableValue = uy;
  }

таким образом это сработало для меня.


Здесь текстовое поле покажет, как вы ожидаете.

<input name = "money" type = "text" value = "{{amount | number :'1.2-2' | currency }}" [(ngModel)] = "amount"/>

Установка - мат валюта-формат

$ npm i mat-currency-format

Описание Директиву можно использовать при вводе html для автоматического изменения ввода на валюту локали.

Ввод в любой локали конвертирует валюту в число внутри компонента. В фокусе пользователь увидит ввод числа, а в фокусе пользователь увидит число в формате валюты с поддержкой формата интернализации и символа валюты.

Имя селектора директивы — mvndrMatCurrencyFormat.

Директива состоит из двух входов:

currencyCode (default value = 'USD') allowNegative (default value = false)

Демо

<input type = "text"
      mvndrMatCurrencyFormat
      [allowNegative] = "false"
      [currencyCode] = "'USD'"
      [value] = "usAmount"
      (blur) = "updateUSAmount($event)" />

надеюсь, это поможет, Ваше здоровье !