离子 3 CPF/CNPJ 面罩答案

【问题标题】：Ionic 3 CPF/CNPJ mask离子 3 CPF/CNPJ 面罩
【发布时间】：2018-04-01 18:38:30
【问题描述】：

我正在寻找 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>

我需要一个领域的展位面具...请给点小费？

【问题讨论】：

任何错误....？
你能告诉我这是什么意思吗？ CPF/CNPJ`
@Sampath CPF 表示巴西公民 ID，CNPJ 表示公司 ID。
哦.. 这似乎是为巴西人准备的 :) 这个 repo 似乎也有错误的信息。它说ionic 3.9.2。但是 Ionic 团队已经发布了 3.7.1 尚未：D

标签： html angular typescript ionic3

【解决方案1】：

其实BR Masker有这个选项：

[brmasker]="{person: true}"

这样CPF/CNPJ号码会自动格式化！

【讨论】：

【解决方案2】：

在寻找解决方案几天后，我为自己创建了一个简单有效的解决方案。所以我想与社区分享这个解决方案，如果你愿意，你可以改进它并再次分享。 DEMO

登录.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.
}

【讨论】：