Estou precisando usar máscaras no Ionic 3. Preciso que a máscara funcione no ion-input, já testei o text-mask mas sem sucesso.
Alguma dica de como fazer?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEstou precisando usar máscaras no Ionic 3. Preciso que a máscara funcione no ion-input, já testei o text-mask mas sem sucesso.
Alguma dica de como fazer?
Veja o que encontrei no fórum do ionic
. Pelos comentários funciona dentro do input.
Coloque esses dados no 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>
e esses na sua folha .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.
}
Aqui uma pergunta parecida no stackoverflow em inglês que pode vir a ser útil.
tem o https://github.com/amarkes/br-masker-ionic-3
ao instalar e importar você pode utilizar como
<ion-item>
<ion-input type="text" name="cpf" placeholder="CPF" [brmasker]="{mask:'000.000.000-00', len:14}"></ion-input>
</ion-item>
Aqui vai um exemplo de máscara espero que resolva. Este aqui formata para apenas números
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>