Я хочу, чтобы в моем приложении угловой 5 произошло следующее.
У меня есть текстовое окно, где я ввожу числовые значения, как только фокус этого текстового поля теряется, введенные числовые значения должны быть отформатированы в валюта с '$' и ',','.' символы. как этого добиться?
Я хочу показать свои входные числовые значения, как показано на рисунке ниже.
🤔 А знаете ли вы, что...
Angular предлагает мощную систему инъекции зависимостей для управления зависимостями и компонентами приложения.
Здесь вам нужно преобразовать 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)">
Код файла .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)" />
надеюсь, это поможет, Ваше здоровье !