I need to use masks on Ionic 3. I need the mask to work on the ion-input, I have already tried the text-mask but without success.
Any tips on how to do this?
I need to use masks on Ionic 3. I need the mask to work on the ion-input, I have already tried the text-mask but without success.
Any tips on how to do this?
See what found in the ionic
forum. By the comments works inside the input.
Put this data in 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>
and those in your .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's a similar question on stackoverflow in English that might come in handy.
you have link
When installing and importing you can use
<ion-item>
<ion-input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}"></ion-input>
</ion-item>
Here's an example mask I hope will solve it. This one formats for just numbers
No .ts:
formatarIdade()
{
var idade = this.cadastro.idade;
if(this.cadastro.idade != undefined){
idade = idade.replace(/\D/g, '');
this.afogamento.idade = idade;
console.log(this.cadastro.idade);
}
}
No.html:
<ion-input type="tel" placeholder="Insira a idade" name="idade" maxlength="2" (keyup)="formatarIdade()" pattern="[0-9]" [(ngModel)]="cadastro.idade" required></ion-input>