angular5中如何实现货币类型输入？

Question

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

我有文本框，我在其中输入数值，一旦失去该文本框的焦点，数值我输入的格式应为 currency with '$' and ',','.'符号。如何实现？

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

Answer 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

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

Answer 2

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

我这样做过

npm install currency-formatter --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;
  }

这种方式对我有用。

Answer 3

此处的文本框将显示您的期望。

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

Answer 4

安装 - 货币格式

$ npm i mat-currency-format

描述该指令可用于 html 输入以自动将输入更改为区域设置货币。

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

指令的选择器名称是 mvndrMatCurrencyFormat

该指令包含两个输入：

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

Demo

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

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

angular5中如何实现货币类型输入？

how to achieve currency type Input in angular 5?

input

currency-formatting

typescript

angular