# CPF/CNPJ Input Mask

**URL:** <https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595>\
**Category:** tutorials\
**Created:** [October 21, 2017, 11:54pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595 "2017-10-21T23:54:58Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [October 21, 2017, 11:54pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/1 "2017-10-21T23:54:58Z")

</div>

Add CPF/CNPJ mask in the same form field on **Ionic 3**. **[DEMO](https://stackblitz.com/edit/ionic-uwd9vt)**  
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**

```auto
<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

```auto

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!

---

<div class="post-metadata">

**Author:** ![lcrevilari](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@lcrevilari](https://forum.ionicframework.com/u/lcrevilari)\
**Post date:** [November 29, 2017, 12:50pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/2 "2017-11-29T12:50:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [November 29, 2017, 1:27pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/3 "2017-11-29T13:27:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lcrevilari](https://avatars.discourse-cdn.com/v4/letter/l/ec9cab/32.png) [@lcrevilari](https://forum.ionicframework.com/u/lcrevilari)\
**Post date:** [November 29, 2017, 11:52pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/4 "2017-11-29T23:52:41Z")

</div>

A parte do input do CPF, por exemplo, está assim:

```auto
<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!”.

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [November 30, 2017, 1:47am UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/5 "2017-11-30T01:47:06Z")

</div>

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](https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/).

---

<div class="post-metadata">

**Author:** ![jnap](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jnap](https://forum.ionicframework.com/u/jnap)\
**Post date:** [March 10, 2018, 1:18pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/6 "2018-03-10T13:18:12Z")

</div>

loguei só pra dar like, muito bom

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [June 27, 2018, 4:11pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/7 "2018-06-27T16:11:19Z")

</div>

Obrigado @jnap! 😀👌  
Legal receber o seu feedback!

---

<div class="post-metadata">

**Author:** ![dduraeso](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dduraeso](https://forum.ionicframework.com/u/dduraeso)\
**Post date:** [July 22, 2018, 11:09pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/8 "2018-07-22T23:09:15Z")

</div>

Fiz o mesmo! Mandou muito @TomCosta!

---

<div class="post-metadata">

**Author:** ![starlley](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/starlley/32/134565_2.png) [@starlley](https://forum.ionicframework.com/u/starlley)\
**Post date:** [December 24, 2018, 5:03pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/9 "2018-12-24T17:03:26Z")

</div>

Muito obrigado amigo, estava precisando de uma validação como essa! Estou começando no ionic agora mas desde já agradeço… E como uso o Git, e sou um bom desenvolevedor, claro que deixei uma mensagem no meu código como forma de agradecimento… ![Screenshot%20from%202018-12-24%2015-02-11](https://global.discourse-cdn.com/ionicframework/original/3X/d/6/d63aeda8fa6d25b3b14be01bdbd7a6fc5403b4d5.png)

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [March 31, 2019, 7:48pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/10 "2019-03-31T19:48:48Z")

</div>

Que legal @starlley fico feliz por poder contribuir. E quanto ao comentário no código, parabéns! Man que belo exemplo! Desejo sucesso na sua carreira! Grande abraço!

---

<div class="post-metadata">

**Author:** ![TomCosta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tomcosta/32/149715_2.png) [@TomCosta](https://forum.ionicframework.com/u/TomCosta)\
**Post date:** [October 23, 2019, 4:53pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/11 "2019-10-23T16:53:37Z")

</div>

Updating the link to the working **[DEMO](https://stackblitz.com/edit/ionic-cpf-cnpj-mask)** code. If you have tried and couldn’t find it. Take a look, right now it is okay, it was fixed.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:54pm UTC](https://forum.ionicframework.com/t/cpf-cnpj-input-mask/109595/13 "2021-07-19T20:54:13Z")

</div>

Closed on July 19, 2021, 8:54pm UTC