Ionic CPF/CNPJ Mask! Help!


#1

Hi!

I have spent the last week trying to use masks on my Ionic 2 project inputs, since I’m a newbie with Angular2, I’ve tried to implement the masks using JQuery’s masked input libs, but on some smartphones the masked fields did not work.

Can somebody show me an example of an ionic2 project using CPF/CNPJ or any kind of mask working? Or only the relevant code and where I put it.

Thanks!


#2

Hi,

You can use this package: https://www.npmjs.com/package/ionic2-input-mask
Use the above mask for CPF, you can change it to fit in CNPJ too.
private cpf = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-' ,/\d/, /\d/];


#3

Unfortunately it does not work: TypeError: e.map is not a function. I am using 2.0.0-beta.11


#4

Please, how did you solve this ?


#5

I have no idea what you 4 are talking about. A bit of context would be nice.


#6

https://text-mask.github.io/text-mask/


#7

@Sujan12 CPF means a brazilian citizen ID, and CNPJ a company ID.
So on login/register you need to input your ID data, and could be a CPF or CNPJ.

CPF mask:'000.000.000-00', len:14
CNPJ mask:'00.000.000/0000-00', len:18
<form>
 <ion-item>
  <ion-label floating>CPF/CNPJ</ion-label>
  <ion-input type="tel" [(ngModel)]="myId" name="myId" [mask]="{mask:'000.000.000-00', len:14}" or [mask]="{mask:'00.000.000/0000-00', len:18}"></ion-input>
 </ion-item>
<ion-item>
</form>

Actually I’m using the br-masker-ionic-3, but it not possible to do this, or at least I don’t know how to…
I didn’t have any idea how to do it in a Ionic 3 app.


#8

Same a bit of context please? What do you want to achieve guys? I’im not sure if you wanna parse zipcodes or display it in a template view ?


#9

It is to display in a template view, after the input ID.
The goal is to put the correct mask on the view, doesn’t matter if the input is either CPF or CNPJ ID.
01
How to detect the correct input length and apply the correct mask on it.


#10

@TomCosta Glad to hear it :slight_smile: Thanks it could help others


#11

Thank you for your kindness @FrancoisIonic.

After a couple of days working on this, i create a simple solution that works on Ionic 3.

I put it on this Tutorial CPF/CNPJ.


#12

Hi, how are you?
We had an update on the library you can check in:
mask for ionic (CPF/CNPJ)


#13

@TomCosta Ty to share Tom !