Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mariohmol/ng-brazil
Commons and utils in angular for brazillian apps ( pipes / validators / directives / masks )
https://github.com/mariohmol/ng-brazil
angular angular7 brazil cnpj cpf directives inscricao-estadual mask pipe rg telefone validators
Last synced: 1 day ago
JSON representation
Commons and utils in angular for brazillian apps ( pipes / validators / directives / masks )
- Host: GitHub
- URL: https://github.com/mariohmol/ng-brazil
- Owner: mariohmol
- License: mit
- Created: 2018-03-11T12:45:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T05:44:03.000Z (23 days ago)
- Last Synced: 2024-11-11T05:55:00.488Z (3 days ago)
- Topics: angular, angular7, brazil, cnpj, cpf, directives, inscricao-estadual, mask, pipe, rg, telefone, validators
- Language: TypeScript
- Homepage: http://geradorbrasileiro.com
- Size: 539 KB
- Stars: 118
- Watchers: 9
- Forks: 24
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Ng-Brazil
Contains pipes / directives / validators / mask for brazillian like apps
[](https://travis-ci.org/mariohmol/ng-brazil)
Supports: Angular2 to Angular14
## Live example:
* https://stackblitz.com/edit/ng-brazil
This project was tested integrated with the following techs:
* angular
* angular-material
* ionic3 (masks is not fully working, that is an issue for that, but pipes/directives/validators/mask works)
Modules:
* CPF
* CNPJ
* RG
* Inscrição Estadual
* Telefone e Celular
* CEP
* Currency (Dinheiro)
* Time (horas e minutos)
* Number (numero e ponto decimal)
* Placa de Carro
* Renavam
* Título de Eleitor
* Proceso Jurídico
See the demo working project:
## Installation
To install this library with npm, run:
` npm install --save ng-brazil js-brasil`
## Usage
### Configuration
Import module in root
```ts
import { NgBrazil } from 'ng-brazil'
@NgModule({
declarations: [
AppComponent
],
imports: [
....,
NgBrazil
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
#### Using Masks
If you would like to use masks install the module:
`npm i -S angular2-text-mask text-mask-addons`
And import to your main app:
```ts
import { TextMaskModule } from 'angular2-text-mask';
imports: [
....,
TextMaskModule,
NgBrazil
],
```
Then setup your component:
```ts
import { Component } from '@angular/core';
import { MASKS, NgBrazilValidators } from 'ng-brazil';
@Component({
selector: 'app-root',
template: '',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public MASKS = MASKS;
constructor() {
this.formFields = {
estado: [''],
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]],
inscricaoestadual: ['', [Validators.required, NgBrazilValidators.inscricaoestadual(this.estado)]]
};
this.form = this.fb.group(this.formFields);
}
}
```
## Forms and Mask
```html
```
## Pipes
```html
CPF: From 12345678910 to {{'12345678910' | cpf}}
CNPJ: From 40841253000102 to {{'40841253000102' | cnpj}}
RG: From MG10111222 to {{'MG10111222' | rg}}
Inscrição Estadual: From 0018192630048 to {{'0018192630048' | inscricaoestadual: 'mg'}}
Telefone: From 3199998888 to {{'3199998888' | telefone}}
Number: From 123.23 to {{'123.23' | numberBrazil}}
Number sem decimais: From 123.23 to {{'123.23' | numberBrazil: 0}}
Currency: From 123.23 to {{'123.23' | currencyBrazil}}
```
```ts
import { Component } from '@angular/core';
import { NgBrDirectives } from 'ng-brazil';
@Component({
selector: 'app-root',
template: '',
styleUrls: ['./app.component.css']
})
export class AppComponent {
inscricaoestadual() {
const {InscricaoEstadualPipe} = NgBrDirectives;
return new InscricaoEstadualPipe()
.transform('625085487072', 'sp');
}
}
```
# Demo
Demo component files are included in Git Project.
Demo Project:
[https://github.com/mariohmol/ng-brazil/tree/master/src/app/demo)
Reference projects:
* https://github.com/mariohmol/js-brasil
* https://github.com/yuyang041060120/ng2-validation
* https://github.com/text-mask/text-mask
# TODO
There is some issues to work with, check it out
## Collaborate
Fork this project then install global libs:
* npm i -g rimraf ng-packagr @angular/compiler-cli @angular/compiler tslib ngc
Finally working in the project folder:
* npm i
* npm run build:lib
* npm run dist
* npm run start
To publish a new release, update the version in [package.json](./package.json) and [src/package.json](./src/package.json),
then run `npm run publish-npm`.
# License
MIT(./LICENSE)