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

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

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

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

Источник

3 ответа

Решение

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

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

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

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

<input type="text" [(ngModel)]="taxableValue" (blur)="formatCurrency_TaxableValue($event)">
здесь на размытие текстового поля я вызываю функцию "formatCurrency_TaxableValue($event)".

Код файла.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;
  }

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

Источник

Здесь вам нужно 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;
  }
}

Посмотреть это демо

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

Источник

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

$ npm i mat-currency-format

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

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

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

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

currencyCode (значение по умолчанию = 'USD') allowNegative (значение по умолчанию = false)

Демо

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

надеюсь, это поможет, ура!

Источник

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

<input name="money" type="text" value="{{amount | number :'1.2-2' | currency }}" [(ngModel)]="amount"/>
Источник
Другие вопросы по тегам