typescript 如何在角度 5 中实现货币类型输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54396044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to achieve currency type Input in angular 5?
提问by Harsha Bhat
I want following thing to happen in my angular 5application.
我希望在我的angular 5应用程序中发生以下事情。
I am having text boxwhere i am inputting numeric values, as soon as focus of that text box is lost, Numeric values i entered should be formatted to currencywith '$' and ',','.' symbols. how to achieve this?
我正在输入数值的文本框，一旦该文本框的焦点丢失，我输入的数值应该被格式化为带有 '$' 和 ',',' 的货币。符号。如何实现这一目标？
I want to show my input numeric values as in below picture.
我想显示我的输入数值，如下图所示。
采纳答案by Harsha Bhat
I have found a way..! I installed a package in my angular 5 application which provides this functionality.
我找到了方法..！我在我的 angular 5 应用程序中安装了一个包，它提供了这个功能。
I have done in this way.
我已经这样做了。
npm install currency-formatter --save
npm 安装货币格式化程序 --save
Code of .html is as follows:
.html的代码如下：
<input type="text" [(ngModel)]="taxableValue" (blur)="formatCurrency_TaxableValue($event)">Code of .ts file is as below.
.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;
}this way it worked for me.
这样它对我有用。
回答by TheParam
Here you need CurrencyPipetransform on (blur) event.
在这里，您需要CurrencyPipe对（模糊）事件进行转换。
In your app.module.tsadd CurrencyPipeprovider.
在您的app.module.ts添加CurrencyPipe提供程序中。
import { CommonModule, CurrencyPipe} from '@angular/common';
@NgModule({
...
providers: [CurrencyPipe]
})
export class AppModule { }
App.component.html
应用组件.html
Bind event onblurevent to input textbox.
将事件onblur事件绑定到输入文本框。
<h1>On Focus lost change Format amount</h1>
<input type="text"(blur)="transformAmount($event)" [(ngModel)]="formattedAmount" />
In your App.component.tsfile write method transformAmount($event)
在您的App.component.ts文件写入方法中transformAmount($event)
AppComponent.ts
应用组件.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;
}
}
See this Demo
看这个演示
Hope above solution will help you!
希望以上解决方案对您有所帮助！
回答by Manvender Singh Rathore
Installation - mat currency-format
安装 - mat 货币格式
$ npm i mat-currency-format
DescriptionThe directive can be used in html input to automatically change the input to locale currency.
说明该指令可用于 html 输入以自动将输入更改为区域设置货币。
Input in any locale currency convert to number inside the component. On focus the user will see to type in number and on focus out the user will see the number in currency format with the support of internalization format and currency symbol
任何区域设置货币的输入转换为组件内的数字。在焦点上，用户将看到输入数字，在焦点上，用户将看到货币格式的数字，支持内化格式和货币符号
The selector name of the directive is mvndrMatCurrencyFormat
指令的选择器名称是 mvndrMatCurrencyFormat
The directive consists of two inputs:
该指令包含两个输入：
currencyCode (default value = 'USD') allowNegative (default value = false)
货币代码（默认值 = 'USD'） allowNegative（默认值 = false）
<input type="text"
mvndrMatCurrencyFormat
[allowNegative]="false"
[currencyCode]="'USD'"
[value]="usAmount"
(blur)="updateUSAmount($event)" />
hope this will help, Cheers !
希望这会有所帮助，干杯！
回答by Sagar C
Here text box will show how you are expecting.
这里的文本框将显示您的期望。
<input name="money" type="text" value="{{amount | number :'1.2-2' | currency }}" [(ngModel)]="amount"/>
