cpf-and-cnpj-field v0.0.1

CpfAndCnpjField

This project was generated with Angular CLI version 1.7.1.

How to use

First you need install using npm.

npm install cpf-and-cnpj-field --save

So let's import the necessary in App.module.ts or in your main module.

import { CpfAndCnpjFieldModule } from './modules/cpf-and-cnpj-field/cpf-and-cnpj-field.module';

And in import area put

imports:[CpfAndCnpjFieldModule],....

Now in your template you can call this beauty component.

<cpf-cnpj-field></cpf-cnpj-field>

Styling

You can use style class in this component, to do this you can use the input() className how you can see bellow.

<cpf-cnpj-field className="doc-field"></cpf-cnpj-field>

After do this the doc-field class must be call with pseudo-selector ::ng-deep because this component has a input field that receive this class.

your css file

::ng-deep .doc-field{ 
  color: #ff0000;
  }

Validate

This component has some validate that can be very useful but you can made your own custom validator either. Well to use the validator for this component first you need choose the angular form you'll use.

Reactive Forms

For this kind of form first in your component.ts create a formGroup and instantiate with a formBuild, see below;

In your component.ts:

wallet: FormGroup;

constructor(private fb:FormBuild){
  this.wallet = fb.group({
    document:['',checkIfDocumentIsValid]
  })
}

The checkIfDocumentIsValid is a function create to validade if CPF/CNPJ is fill and valid. You can receive 3 diferent errors, this function is include on module and you need import in your component.

• documentInvalid When user input non digits characters or the total of digits is less than 11
• documentCpfInvalid When user input a non valid cpf number.
• documentCnpjInvalid When user input a non valid cnpj number.

In your Template:

<form [formGroup]="wallet">
  <cpf-cnpj-field className="doc-field" formControlName="document"></cpf-cnpj-field>

  <p *ngIf="wallet.get('document').hasError('documentInvalid')">Number invalid for this field</p>
  <p *ngIf="wallet.get('document').hasError('documentCpfInvalid')">CPF not valid</p>
  <p *ngIf="wallet.get('document').hasError('documentCnpjInvalid')">CNPJ not valid</p>
</form>

Template-Driven Forms

You have many ways to create this kind of forms so i will show you how i work with this.

In your component.ts:

submit(form:NgForm):void{
  console.log(form.value)
}

When i use this form i don't use a model on the component, i like pass all value in a instance of ngForm from template to component.

You have the same possible errors when use driven forms

• documentInvalid When user input non digits characters or the total of digits is less than 11
• documentCpfInvalid When user input a non valid cpf number.
• documentCnpjInvalid When user input a non valid cnpj number.

In your Template:

<form [formGroup]="wallet">
  <cpf-cnpj-field className="doc-field" required documentValidate ngModel #document="ngModel" name="document"></cpf-cnpj-field>

    <p *ngIf="document.errors && document.errors.documentInvalid">Number invalid for this field</p>
    <p *ngIf="document.errors && document.errors.documentCpfInvalid">CPF not valid</p>
    <p *ngIf="document.errors && document.errors.documentCnpjInvalid">CNPJ not valid</p>
</form>

The documentValidate is the directive used to call the validation and you must put this when use driven forms.

You can help!

You can help to improve this module! send a pull request with your contribuition.

Send me a e-mail: maique.rosa@gmail.com