CPF/CNPJ Input Mask


#1

Add CPF/CNPJ mask in the same form field on Ionic 3. DEMO
Independent of which one is inputed either a CPF or a CNPJ. After a couple of days working for a solution I create myself this one simple that works. So I would like to share with the community that solution, and if you want you can improve it and share again.

login.html

<form #loginForm="ngForm">
  <ion-item>
    <ion-label floating>CPF/CNPJ</ion-label>
    <ion-input [(ngModel)]="cpf_cnpj" (blur)="cpf_cnpj = format(cpf_cnpj)" name="cpf_cnpj"></ion-input>
  </ion-item>
  <button ion-button full type="submit" color="sicor" (tap)="login(signForm.value)">Login</button>
</form>

login.ts


import { MenuController, NavParams, ModalController } from 'ionic-angular';
import { IonicPage, NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { Component } from '@angular/core';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  cpf_cnpj = '';
  DECIMAL_SEPARATOR=".";
  GROUP_SEPARATOR=",";
  pureResult: any;
  maskedId: any;
  val: any;
  v: any;

constructor(
  public modalCtrl: ModalController, 
  private alertCtrl: AlertController,
  private menu: MenuController,
  public navCtrl: NavController, 
  ){} 

  ionViewDidEnter() {
    this.menu.swipeEnable(false);
  }
  ionViewWillLeave(){
    this.menu.swipeEnable(true);
  }

  format(valString) {
    if (!valString) {
        return '';
    }
    let val = valString.toString();
    const parts = this.unFormat(val).split(this.DECIMAL_SEPARATOR);
    this.pureResult = parts;
    if(parts[0].length <= 11){
      this.maskedId = this.cpf_mask(parts[0]);
      return this.maskedId;
    }else{
      this.maskedId = this.cnpj(parts[0]);
      return this.maskedId;
    }
};

unFormat(val) {
    if (!val) {
        return '';
    }
    val = val.replace(/\D/g, '');

    if (this.GROUP_SEPARATOR === ',') {
        return val.replace(/,/g, '');
    } else {
        return val.replace(/\./g, '');
    }
};

 cpf_mask(v) {
    v = v.replace(/\D/g, ''); //Remove tudo o que não é dígito
    v = v.replace(/(\d{3})(\d)/, '$1.$2'); //Coloca um ponto entre o terceiro e o quarto dígitos
    v = v.replace(/(\d{3})(\d)/, '$1.$2'); //Coloca um ponto entre o terceiro e o quarto dígitos
    //de novo (para o segundo bloco de n√ļmeros)
    v = v.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); //Coloca um hífen entre o terceiro e o quarto dígitos
    return v;
}

 cnpj(v) {
    v = v.replace(/\D/g, ''); //Remove tudo o que não é dígito
    v = v.replace(/^(\d{2})(\d)/, '$1.$2'); //Coloca ponto entre o segundo e o terceiro dígitos
    v = v.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3'); //Coloca ponto entre o quinto e o sexto dígitos
    v = v.replace(/\.(\d{3})(\d)/, '.$1/$2'); //Coloca uma barra entre o oitavo e o nono dígitos
    v = v.replace(/(\d{4})(\d)/, '$1-$2'); //Coloca um hífen depois do bloco de quatro dígitos
    return v;
}

  public login(formData) { 
       ....you auth code here.
}

Here is… I hope it helps you!


Mascara para ionic
Ionic CPF/CNPJ Mask! Help!
#2

Bom dia Tom! Após aplicar a máscara no meu input, funciona corretamente, mas caso eu utilize uma validação com ngIf o campo não é validado no meu formulário. Se eu retirar a máscara funciona corretamente. Sabe o que pode ser?

Valeu


#3

Ol√° @lcrevilari,
Eu teria que ver o c√≥digo antes, mas o princ√≠pio √© de que vai depender o que pretende com o ngIf="" e onde est√° aplicando. Se tentar colocar um ngIf="" na tag <ion-input> n√£o vai ter resultado pois entrar√° em conflito com as outras fun√ß√Ķes na mesma tag, tente incluir o seu ngIf="" na tag <ion-item>. Ou se for alguma condi√ß√£o relacionada √† entrada de dados, use as fun√ß√Ķes no Javascrit.

I would have to see the code before, but the principle is that it will depend on what you want with ngIf = ‚Äú‚ÄĚ and where you are applying it. If you try to put a ngIf = ‚Äú‚ÄĚ in the <ion-input> tag it will not work because it will conflict with the other functions in the same tag, try adding your ngIf = ‚Äú‚ÄĚ to the <ion-item> tag. Or maybe, if it is a condition related to data entry, use it on the functions in javascrit.


#4

A parte do input do CPF, por exemplo, est√° assim:

<ion-item>
     <ion-label stacked>CPF</ion-label>      
     <ion-input type="tel" name="cpf" pattern=".{10,11}[0-9]+$" maxlength="11" [(ngModel)]="user.cpf" #cpf="ngModel" (blur)="user.cpf = format(user.cpf)" required></ion-input>
</ion-item>      
<ion-item *ngIf="cpf.errors && (cpf.dirty || cpf.touched)" class="text-danger">
     CPF cont√©m 11 n√ļmeros!
</ion-item>

E a função para máscara do CPF, no meu .ts, está igual ao seu exemplo.

A m√°scara funciona, por√©m o meu formul√°rio n√£o fica v√°lido e retorna o erro ‚ÄúCPF cont√©m 11 n√ļmeros!‚ÄĚ.


#5

Grande @lcrevilari,
Pelo que v√≠ voc√™ modificou o c√≥digo sugerido neste tutorial, isso indica tamb√©m que n√£o leu a sugest√£o na resposta anterior. O que voc√™ est√° tentando fazer √© uma valida√ß√£o de entrada de dados, e talvez voc√™ n√£o tenha entendido para o que serve esta m√°scara. Esta serve para a entrada de dados tanto de um CPF quanto de um CNPJ, independente de qual for inserido ser√° aplicada a devida m√°scara correspondente. Por isso, voc√™ n√£o deve validar pelo n√ļmero de algarismos, pois as duas entradas (CPF e CNPJ) possuem diferentes tamanhos. Se n√£o √© o que esperava, procure um plugin apenas para CPF, tem v√°rios exemplos pela web.
Contribuindo… para qualquer outro tipo de validação, busque um exemplo que valide o formulário através do ngModel. Segue aqui um tutorial sobre validação.


#6

loguei só pra dar like, muito bom


#7

Obrigado @jnap! :grinning::ok_hand:
Legal receber o seu feedback!


#8

Fiz o mesmo! Mandou muito @TomCosta!