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.

GitHub - ionited/ionic-input-mask

Comentários (0)