如何在角度5中实现货币类型输入？答案

【问题标题】：how to achieve currency type Input in angular 5?如何在角度5中实现货币类型输入？
【发布时间】：2019-01-28 05:33:22
【问题描述】：

我希望在我的 angular 5 应用程序中发生以下事情。

我有 文本框，我在其中输入数值，一旦失去该文本框的焦点，我输入的数值应格式化为货币带有'$'和',','。'符号。如何做到这一点？

我想如下图所示显示我的输入数值。

【问题讨论】：

我在stackblitz上添加了解决方案，请检查stackblitz.com/edit/…

标签： angular typescript input currency-formatting

【解决方案1】：

这里你需要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;
  }
}

看到这个Demo

希望以上解决方案对您有所帮助！

【讨论】：

谢谢。这真的很有帮助。但我得到像'USD456,132.00'这样的输出，即我得到'USD'而不是'$'符号。
如果你在那里看到 stackblitz 演示，你会得到你想要实现的目标
我观察到很多人都面临同样的问题。 github.com/angular/angular/issues/16374 。现在我已经这样做了 -> this.houseHoldIncome = this.currencyPipe.transform(this.houseHoldIncome, 'USD').replace("USD", "$");
不要这样做，只需将 'USD' 替换为 '$' 这会有所帮助

【解决方案2】：

安装 - 货币格式

$ npm i mat-currency-format

说明该指令可用于 html 输入以自动将输入更改为语言环境。

以任何语言环境货币输入在组件内转换为数字。聚焦时用户将看到输入数字，聚焦时用户将看到货币格式的数字，支持内部化格式和货币符号

指令的选择器名称是 mvndrMatCurrencyFormat

指令由两个输入组成：

currencyCode (默认值 = 'USD') allowNegative (默认值 = 假）

Demo

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

希望这会有所帮助，干杯！

【讨论】：

【解决方案3】：

我找到了方法..！我在我的 Angular 5 应用程序中安装了一个提供此功能的包。

我是这样做的。

npm install currency-formatter --save

.html的代码如下：

&lt;input type="text" [(ngModel)]="taxableValue" (blur)="formatCurrency_TaxableValue($event)"&gt;

在文本框的模糊处，我正在调用 "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;
  }

这种方式对我有用。

【讨论】：

【解决方案4】：

这里的文本框将显示您的期望。

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

【讨论】：