NgBrazilImask

Contains pipes / directives / validators / mask for brazillian like apps

Supports: Angular2 to Angular17

This is a WIP project based on NgBrazil

Modules:

• CPF
• CNPJ
• RG
• Telefone e Celular
• CEP
• Currency (Dinheiro)

Installation

To install this library with npm, run:

npm install --save ng-brazil-imask

Usage

Configuration

Import module in root

import { NgBrazil } from  'ng-brazil'

@NgModule({

declarations: [

AppComponent

],

imports: [

....,

NgBrazil

],

providers: [],

bootstrap: [AppComponent]

})

export  class  AppModule { }

Then setup your component:

import { Component } from  '@angular/core';

import { MASKS, NgBrazilValidators } from  'ng-brazil';

  

@Component({

selector:  'app-root',

template:  '<input type="text" [cpf]>',

styleUrls: ['./app.component.css']

})

export  class  AppComponent {

public  MASKS = MASKS;

constructor() {

this.formFields = {

estado: [''],

cpf: ['', [<any>Validators.required, <any>NgBrazilValidators.cpf]],

cnpj: ['', [<any>Validators.required, <any>NgBrazilValidators.cnpj]],

rg: ['', [<any>Validators.required, <any>NgBrazilValidators.rg]],

cep: ['', [<any>Validators.required, <any>NgBrazilValidators.cep]],

telefone: ['', [<any>Validators.required, <any>NgBrazilValidators.telefone]],

inscricaoestadual: ['', [<any>Validators.required, <any>NgBrazilValidators.inscricaoestadual(this.estado)]]

};

this.form = this.fb.group(this.formFields);

}

  

}

Forms and Mask

<input  type="text"  formControlName="cnpj"  cnpj  [imask]="MASKS.cnpj.textMask">
<input  type="text"  formControlName="cpf"  cpf  [imask]="MASKS.cpf.textMask">
<input  type="text"  formControlName="telefone"  telefone  #telefone  [imask]="MASKS.telefone.textMaskFunction">
<input  type="text"  formControlName="cep"  cep  [imask]="MASKS.cep.textMask">
<input  type="text"  formControlName="number"  number  [imask]="MASKS.number.textMask">

Pipes

CPF: From 12345678910 to {{'12345678910' | cpf}} <br/>
CNPJ: From 40841253000102 to {{'40841253000102' | cnpj}} <br/>
Telefone: From 3199998888 to {{'3199998888' | telefone}} <br/>
Number: From 123.23 to {{'123.23' | numberBrazil}} <br/>
Number sem decimais: From 123.23 to {{'123.23' | numberBrazil: 0}} <br/>
Currency: From 123.23 to {{'123.23' | currencyBrazil}} <br/>

import { Component } from  '@angular/core';
import { NgBrDirectives } from  'ng-brazil';

@Component({
	selector:  'app-root',
	template:  '<input type="text" [cpf]>',
	styleUrls: ['./app.component.css']
})

export  class  AppComponent {
inscricaoestadual() {

const {InscricaoEstadualPipe} = NgBrDirectives;

return  new  InscricaoEstadualPipe()

.transform('625085487072', 'sp');

}

}

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.