20 de agosto de 2020 • 2 min de leitura

Usando a dependência ng2-currency-mask

Irei demostrar nesse artigo como usar a dependência ng2-currency-mask no Angular 10

ng2-currency-mask

Uma diretiva de máscara de moeda muito simples para projetos Angular que permite usar um atributo de número com o ngModel. Em outras palavras, o modelo é um número e não uma string com uma máscara.

Instalando e importando

Instale o pacote pelo comando:

npm i ng2-currency-mask

Importar o módulo

import { CurrencyMaskModule } from "ng2-currency-mask";
 
@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

Como usar

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

Usando o Options

Você pode definir as opções a seguir:

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

input-currency-mask

Opções disponíveis:

  • align - Alinhamento do texto na entrada. (default: right) Tipo suportado: left, right
  • allowNegative - Se true pode inserir valores negativos. (default: true)
  • decimal - Separador de decimais (default: '.')
  • precision - Número de casas decimais (default: 2)
  • prefix - Prefixo de dinheiro (default: '$ ') Ex.: 'R$ '
  • suffix - Sufixo de dinheiro (default: '')
  • thousands - Separador de milhares (default: ',')

Exemplo de %

<input
    currencyMask
    [(ngModel)]="value"
    [options]="{
      prefix: '',
      thousands: '',
      decimal: ',',
      suffix: ' %',
      align: 'right'
    }"
  />

porcentagem

Definindo opções globalmente

import { 
  CurrencyMaskConfig, 
  CurrencyMaskModule, 
  CURRENCY_MASK_CONFIG } from 'ng2-currency-mask';
 
export const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
    align: "right",
    allowNegative: true,
    decimal: ",",
    precision: 2,
    prefix: "R$ ",
    suffix: "",
    thousands: "."
};
 
@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [
        { provide: CURRENCY_MASK_CONFIG, useValue: CustomCurrencyMaskConfig }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

Validação

Esta diretiva também fornece validação interna para valores mínimos e máximos. Se os atributos 'min' e/ou 'max' forem configurados, a classe Angular CSS 'ng-invalid' será adicionada à entrada para indicar um valor inválido.

<input 
  currencyMask 
  [(ngModel)]="value"
  name="value"
  min="0" 
  max="99.99" 
 />

Comentários