ng-brazil - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #android #rust #macos #cli #kubernetes #vue #awesome-list #mcp #openai

ng-brazil

(★ 116)

Commons and utils in angular for brazillian apps ( pipes / validators / directives / masks )

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - custom.md
  - feature_request.md
- - ci.yml
- app.e2e-spec.ts
- app.po.ts
- tsconfig.e2e.json
- - angular2TextMask.ts
  - lib.module.ts
  - public_api.ts
- .browserslistrc
- ng-package.json
- package-install.json
- package.json
- README.md
- - app.component.css
  - app.component.html
  - app.component.spec.ts
  - app.component.ts
  - app.module.ts
- - .gitkeep
  - print.png
- - environment.prod.ts
  - environment.ts
- favicon.ico
- index.html
- main.ts
- polyfills.ts
- styles.css
- test.ts
- tsconfig.app.json
- tsconfig.packages.json
- tsconfig.spec.json
- typings.d.ts
.editorconfig
.gitignore
.travis.yml
angular.json
CODE_OF_CONDUCT.md
CONTRIBUTING.md
karma.conf.js
LICENSE
package.json
protractor.conf.js
README.md
renovate.json
tsconfig.json
tslint.json

# Installation Guide

1. Get the code

git clone https://github.com/mariohmol/ng-brazil

Downloads the entire project code from GitHub to your computer.

cd ng-brazil

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save ng-brazil js-brasil

Downloads and installs the libraries listed in package.json.

npm install

Downloads and installs the libraries listed in package.json.

npm run build:lib # build the library

Builds optimized production files.

npm run build:demo # build the demo app

Builds optimized production files.

npm run start # serve the demo locally

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Ng-Brazil

Contains pipes / directives / validators / masks for Brazilian Angular apps.

[![CI](https://github.com/mariohmol/ng-brazil/actions/workflows/ci.yml/badge.svg)](https://github.com/mariohmol/ng-brazil/actions/workflows/ci.yml)

## Angular compatibility

| ng-brazil | Angular |
|-----------|---------|
| 4.x       | 15 – 19 |
| 3.x       | 13 – 14 |

## Live demo

* https://test.counbo.com/ng-brazil/

## Modules

* CPF
* CNPJ
* RG
* Inscrição Estadual
* Telefone e Celular
* CEP
* Currency (Dinheiro)
* Time (horas e minutos)
* Number (número e ponto decimal)
* Placa de Carro
* Renavam
* Título de Eleitor
* PIS/PASEP
* Processo Jurídico

## Installation

```bash
npm install --save ng-brazil js-brasil
```

## Usage

### Import the module

```ts
import { NgBrazil } from 'ng-brazil';

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgBrazil,          // includes TextMaskModule — no separate install needed
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

> **Note:** `TextMaskModule` is bundled inside `ng-brazil`. You no longer need to install `angular2-text-mask` separately.

### Validators (Reactive Forms)

```ts
import { MASKS, NgBrazilValidators } from 'ng-brazil';
import { Validators, FormBuilder } from '@angular/forms';

@Component({ ... })
export class AppComponent {
  public MASKS = MASKS;

form = this.fb.group({
    cpf:             ['', [Validators.required, NgBrazilValidators.cpf]],
    cnpj:            ['', [Validators.required, NgBrazilValidators.cnpj]],
    rg:              ['', [Validators.required, NgBrazilValidators.rg]],
    cep:             ['', [Validators.required, NgBrazilValidators.cep]],
    telefone:        ['', [Validators.required, NgBrazilValidators.telefone]],
    placa:           ['', [Validators.required, NgBrazilValidators.placa]],
    renavam:         ['', [Validators.required, NgBrazilValidators.renavam]],
    pispasep:        ['', [Validators.required, NgBrazilValidators.pispasep]],
    titulo:          ['', [Validators.required, NgBrazilValidators.titulo]],
    time:            ['', [Validators.required, NgBrazilValidators.time]],
    currency:        ['', [Validators.required, NgBrazilValidators.currency]],
    inscricaoestadual: ['', [Validators.required, NgBrazilValidators.inscricaoestadual('mg')]],
  });

constructor(private fb: FormBuilder) {}
}
```

### Masked inputs (template)

```html
<input type="text" formControlName="cpf"      cpf      [textMask]="{mask: MASKS.cpf.textMask}">
<input type="text" formControlName="cnpj"     cnpj     [textMask]="{mask: MASKS.cnpj.textMask}">
<input type="text" formControlName="rg"       rg       [textMask]="{mask: MASKS.rg.textMask}">
<input type="text" formControlName="cep"      cep      [textMask]="{mask: MASKS.cep.textMask}">
<input type="text" formControlName="telefone" telefone [textMask]="{mask: MASKS.telefone.textMaskFunction}">
<input type="text" formControlName="placa"    placa    [textMask]="{mask: MASKS.placa.textMask}">
<input type="text" formControlName="renavam"  renavam  [textMask]="{mask: MASKS.renavam.textMask}">
<input type="text" formControlName="pispasep" pispasep [textMask]="{mask: MASKS.pispasep.textMask}">
<input type="text" formControlName="titulo"   titulo   [textMask]="{mask: MASKS.titulo.textMask}">
<input type="text" formControlName="time"     time     [textMask]="{mask: MASKS.time.textMask}">
<input type="text" formControlName="currency" currency [textMask]="{mask: MASKS.currency.textMask}">
<input type="text" formControlName="number"   number   [textMask]="{mask: MASKS.number.textMask}">

<input type="text" formControlName="inscricaoestadual"
       inscricaoestadual="mg"
       [textMask]="{mask: MASKS.inscricaoestadual['mg'].textMask}">
```

### Pipes

```html
{{ '15663188150'    | cpf }}               
{{ '40841253000102' | cnpj }}              
{{ 'MG10123456'     | rg }}               
{{ '31234567'       | cep }}               
{{ '3199999998'     | telefone }}          
{{ 'ADJ5468'        | placa }}             
{{ '37699553589'    | renavam }}           
{{ '12312345120'    | pispasep }}          
{{ '0018192630048'  | inscricaoestadual: 'mg' }}
{{ '1234,56'        | currencyBrazil }}    
{{ '1234,56'        | numberBrazil: 2 }}   
{{ '0633'           | time }}              
```

### Using pipes in TypeScript

```ts
import { NgBrDirectives } from 'ng-brazil';

const formatted = new NgBrDirectives.InscricaoEstadualPipe()
  .transform('625085487072', 'sp');
```

## Troubleshooting

### `js-brasil` fails to compile / CommonJS warning in Angular 11+

Angular 11 introduced stricter handling of CommonJS dependencies. Because `js-brasil` ships
a CommonJS build, Angular may print a warning or fail with an error like:

```
WARNING in js-brasil (and its dependencies) should be converted to ES modules.
CommonJS or AMD dependencies can cause optimization bailouts.
```

**Fix:** add `js-brasil` to `allowedCommonJsDependencies` in your project's `angular.json`:

```json
{
  "projects": {
    "<your-app>": {
      "architect": {
        "build": {
          "options": {
            "allowedCommonJsDependencies": ["js-brasil"]
          }
        }
      }
    }
  }
}
```

See the [Angular CommonJS dependencies guide](https://angular.io/guide/build#configuring-commonjs-dependencies)
for more details.

---

## Collaborate

```bash
npm install
npm run build:lib   # build the library
npm run build:demo  # build the demo app
npm run start       # serve the demo locally
```

To publish a new release, update the version in `package.json` and `ng-brazil/package.json`, then run `npm run publishnpm`.

## References

* https://github.com/mariohmol/js-brasil
* https://github.com/text-mask/text-mask

## License

MIT