nbfontana / ngx-br

📦 The brazilian module for Angular

@nbfontana/ngx-br

I'm the brazilian module for angular

There're many repositories covering Brazilian needs for software development. NgxBr is here to concentrate almost everything that you need to build a functional pt-br software with Angular. We give you a full set of components (inputs, select, etc) covering fields like CEP, CPF, CNPJ, ESTADOS, etc. Beside that, we make available everything we use to build our components for the user, like Pipes and Directives (masks).

Feel free to use the entire NgxBrModule if it's your need, but you can always import components or pipes separatedly. Use it the way you want to.

Contents

• Components
  • Cep
  • Cnpj
  • Cpf
  • Dinheiro
  • Estados
  • Hora
  • Percentual
  • Peso
  • Telefone
• Pipes
  • Cpf
  • Cnpj
  • Cpf ou cnpj
  • Telefone
  • Cep
• Directives
  • Cep
  • Cnpj
  • Cpf
  • Dinheiro
  • Hora
  • Percentual
  • Telefone

Usage

Install as a dependency:

$ npm install --save @nbfontana/ngx-br

Then, you need to include NgxBrModule in your app:

import { Component, NgModule } from '@angular/core';
import { NgxBrModule } from '@nbfontana/ngx-br';

@NgModule({
  imports: [
    NgxBrModule.forRoot()
  ]
})
export class MyModule {}

And use it:

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

@Component({
  template: '<cpf formControlName="cpf" [(ngModel)]="model.cpf"></cpf>'
})
export class MyComponent {}

FAQ

How do the inputs look like? bootstrap, material?

NgxBr is using Bootstrap classes for now, so, if you override the bootstrap style for .form-control, it'll be applied to all inputs as well. But we'll work to let it more flexible, all ideas are welcome! Open an Issue (you can write it in Portuguese).

Help needed

Maybe you could help me define the way that components may be stylized?

Wich components should be added?

What kind of utilities may also be added and helpfull to be used within and outside ngx-br?

MIT @ Neri Bez Fontana

ngx-br's Issues

Telefone component should mask both, residential phone numbers and cell phone numbers

Telefone component should mask both, residential phone numbers and cell phone numbers

Create a fixed phone component

Today we have a Telefone component that handles both, cell phone and fixed phone number, but we should have a simple one only with a fixed phone mask.

The feature should include a pipe and a mask as well.

Create a mixed input (cpfOuCnpj)

Expected Behavior

<cpfCnpj ....> to format/parse acording to input value.

Actual Behavior

None

Create a cell phone component

Today we have a Telefone component that handles both, cell phone and fixed phone number, but we should have a simple one only with a cell phone mask.

The feature should include a pipe and a mask as well.

Feature requests, discussions, tips

Feel free to give some Ideas for the project!

Add 'required' attribute

Expected Behavior

<cpf .... required></cpf> inject 'required' into <input cpfMask....

BTW, this could be the default behavior of any attribute, by-pass them to component.

Actual Behavior

It ignores the 'required' attribute.

Suggested changes

Suggested changes

The input cpf, cnpj, tel and cep change to type = "tel".

Improves typing on mobile

Provide formated value for fields.

Expected Behavior

The model value has the unformatted field value, but on error handling the formatted value typed could be used in user feedbacks, i.e. 'O CPF '000.111.222-33' é inválido.'

Actual Behavior

Could not find the formatted value on formcontrol. I´ll have to use vanilla to format my customized error or use some sort of feature to recover ElementRef to get nativeValue, with this 'feature' it would not be required.

cálculo da aposentadoria

Expected Behavior

Estava pensando em incluir o módulo de cálculo de aposentadoria no ngx-br.

Actual Behavior

Pensei em perguntar se há ou não necessidade disso, do que fazer um código e ele ser rejeitado.

Steps to Reproduce the Problem

1. Existem aposentadoria atual que é o tempo de idade e o tempo de serviço, isso geralmente é para funcionário público
2. existem outros tipos de aposentadoria(que vai além de ser funcionário público), como a aposentadoria para alguma classe política

Specifications

• Version: última versão
• Platform: debian
• Subsystem: linux