ng2-ebw-currency-mask

A very simple currency mask directive for Angular that allows using a number attribute with the ngModel. In other words, the model is a number, and not a string with a mask. It was tested in Angular version 9.

Note: This component is ready to AoC (Ahead-of-Time) compilation.

Getting Started

Installing and Importing

Install the package by command:

1    npm install ng2-ebw-currency-mask --save

Import the module

1import { CurrencyMaskModule } from "ng2-ebw-currency-mask";
2
3@NgModule({
4    imports: [
5        ...
6        CurrencyMaskModule
7    ],
8    declarations: [...],
9    providers: [...]
10})
11export class AppModule {}

Using

1    <input currencyMask [(ngModel)]="value" />

• ngModel An attribute of type number. If is displayed '$ 25.63', the attribute will be '25.63'.

Options

You can set options as follows:

1    <!-- example for pt-BR money -->
2    <input currencyMask [(ngModel)]="value" [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"/>

Available options:

• align - Text alignment in input. (default: right)
• allowNegative - If true can input negative values. (default: true)
• decimal - Separator of decimals (default: '.')
• precision - Number of decimal places (default: 2)
• prefix - Money prefix (default: '$ ')
• suffix - Money suffix (default: '')
• thousands - Separator of thousands (default: ',')

You can also set options globally...

1import { CurrencyMaskConfig, CurrencyMaskModule, CURRENCY_MASK_CONFIG } from 'ng2-ebw-currency-mask';
2
3export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
4    align: "right",
5    allowNegative: true,
6    decimal: ",",
7    precision: 2,
8    prefix: "R$ ",
9    suffix: "",
10    thousands: "."
11};
12
13@NgModule({
14    imports: [
15        ...
16        CurrencyMaskModule
17    ],
18    declarations: [...],
19    providers: [
20        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
21    ],
22    bootstrap: [AppComponent]
23})
24export class AppModule {}

Validation

This directive also provides built-in validation for minimum and maximum values. If the attributes 'min' and / or 'max' are setted, the Angular CSS class 'ng-invalid' will be added to the input to indicate an invalid value.

1    <input currencyMask [(ngModel)]="value" min="-10.50" max="100.75" />

Quick fixes

Ionic 2-3

Input not working on mobile keyboard

1<!-- Change the type to 'tel' -->
2    <input currencyMask type="tel" [(ngModel)]="value" />

Input focus get hide by the mobile keyboard

on HTML

1<!-- Change the type to 'tel' -->
2    <input currencyMask type="tel" [(ngModel)]="value" [id]="'yourInputId' + index" (focus)="scrollTo(index)" />

on .ts

1import { Content } from 'ionic-angular';
2
3export class...
4
5    @ViewChild(Content) content: Content;
6  
7    scrollTo(index) {
8        let yOffset = document.getElementById('yourInputId' + index).offsetTop;
9        this.content.scrollTo(0, yOffset + 20);
10    }

Questions? Open a Issue!