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!
