Ng2 货币掩码

Ng2 货币掩码是一个可以在 Angular 2+ 应用程序中使用的指令，它可以自动将文本框中的输入值格式化为货币格式。本指南将介绍如何在您的应用程序中使用 Ng2 货币掩码。

安装

使用以下命令安装 Ng2 货币掩码：

npm install ng2-currency-mask --save

配置

导入 CurrencyMaskModule 模块到您的应用程序模块中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { CurrencyMaskModule } from 'ng2-currency-mask';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    CurrencyMaskModule, // 导入模块
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [
    AppComponent,
  ],
})
export class AppModule {}

使用

在您的 HTML 模板中添加 currencyMask 指令：

<input type="text" currencyMask [(ngModel)]="price" />

您也可以在形式控制中使用它：

<input type="text" currencyMask formControlName="price" />

参数

以下是 currencyMask 指令接受的所有参数：

• align: 'left' 或 'right'。控件中的货币符号应该左对齐还是右对齐。默认是 'left'。
• prefix: 货币符号的前缀。默认为空白。
• suffix: 货币符号的后缀。默认为 .00。
• thousands: 分隔符。默认为 ,。
• decimal: 小数点。默认为 .。
• precision: 小数点后的位数。默认为 2。

<input type="text" currencyMask
  [(ngModel)]="price"
  [align]="'right'"
  [prefix]="'$'"
  [suffix]="' USD'"
  [thousands]="'.'"
  [decimal]="','"
  [precision]="3" />

总结

现在，您可以使用 Ng2 货币掩码指令在您的 Angular 2+ 应用程序中自动格式化货币输入框。希望本教程对您有所帮助！