Máscara de input no Ionic
131d atrás
Pré-requisitos
Um projeto Ionic Angular. Esse tutorial usa #Ionic 8, mas com poucas alterações você pode utilizar ele em outras versões do Ionic mais antigas, que usem pelo menos Angular 2+.
Código
A primeira coisa que vamos fazer é instalar a biblioteca inputmask e suas tipagens.
npm i inputmask
npm i -D @types/inputmask
Agora vamos criar uma diretiva:
ionic g directive global/directives/mask
Vá no arquivo criado, mask.directive.ts e adicione o seguinte código:
import { Directive, ElementRef, Input } from '@angular/core';
import Inputmask from 'inputmask';
@Directive({
selector: '[mask]',
standalone: true
})
export class MaskDirective {
@Input() mask: any;
constructor(
private el: ElementRef
) { }
ngOnInit(): void {
this.el.nativeElement.getInputElement()
.then((value: HTMLInputElement) => Inputmask(this.mask).mask(value));
}
}
Ele basicamente aplica a biblioteca inputmask nos elementos em que forem adicionados o atributo mask.
Aplicando a máscara
Na página que você quiser utilizar a máscara importe a MaskDirective:
import { Component } from '@angular/core';
import { IonContent, IonInput, IonItem } from '@ionic/angular/standalone';
import { MaskDirective } from '../global/directives/mask.directive';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
standalone: true,
imports: [IonContent, IonInput, IonItem, MaskDirective],
})
export class HomePage {
constructor() { }
}
E no HTML é só usar o atributo "mask" nos seus ion-inputs passando a máscara desejada. Dessa forma, a diretiva é aplicada.
<ion-content class="ion-padding">
<ion-item>
<ion-input [mask]="['(99) 9999-9999', '(99) 99999-9999']" label="Telefone" labelPlacement="floating"></ion-input>
</ion-item>
<ion-item>
<ion-input label="CEP" labelPlacement="floating" mask="99999-999"></ion-input>
</ion-item>
</ion-content>
Projeto
Você pode ver o código desse projeto no GitHub:
GitHub - ionited/ionic-input-mask
Contribute to ionited/ionic-input-mask development by creating an account on GitHub.
Comentários (0)