Ionic 3 CPF/CNPJ面具

Question

我正在爲CPF/CNPJ尋找一個面具，爲這兩個在一起。 其實我使用這個br-masker-ionic-3作爲解決方案，但它不能放在一起cpf和cnpj。

<form #signForm="ngForm"> 
<ion-item> 
    <ion-label floating>CPF/CNPJ</ion-label> 
    <ion-input type="tel" name="cgc" ngModel [brmasker]="{mask:'000.000.000-00', len:14}" [brmasker]="{mask:'00.000.000/0000-00', len:18}"></ion-input> 
</ion-item> 
<ion-item> 

我需要在一個領域......請，一些小費展位面膜？

Answer 1

經過幾天的尋找解決方案，我創建了自己的這一個簡單的工作。所以我想與社區分享那個解決方案，如果你想要，你可以改進它並再次分享。 DEMO

的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. 
}