@ionic-mask

Um componente Ionic para utilização de máscara personalizada em inputs

Instalação

Utilize o gerenciador de pacotes npm para fazer a instalação do componente

npm install ionic-mask

Como usar

Importação do módulo "IonicMaskModule" na pagina que será utilizado

import { IonicMaskModule } from 'ionic-mask';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    IonicMaskModule,
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Aplicação em inputs HTML

Prefix

<ion-item>
    <ion-label position="floating">
        Prefix (R$)
    </ion-label>
    <ion-input formControlName="prefixReal" type="number" [ionic-mask]="{prefix: 'R$'}" value=""></ion-input>
    <ion-note>Output: {{form.value.prefixReal}}</ion-note>
</ion-item>

Prefix Fixed

<ion-item>
    <ion-label position="stacked">
        Prefix (U$) Fixed
    </ion-label>
    <ion-input formControlName="prefixDolar" type="number" [ionic-mask]="{prefix: 'U$', type: 'number', fixed_morpheme: true}" value=""></ion-input>
    <ion-note>Output: {{form.value.prefixDolar}}</ion-note>
</ion-item>

Sufix

<ion-item>
    <ion-label position="floating">
        Sufix
    </ion-label>
    <ion-input formControlName="sufix" type="text" [ionic-mask]="{sufix: '@email.com',  type: 'text', fixed_morpheme: false}" value=""></ion-input>
    <ion-note>Output: {{form.value.sufix}}</ion-note>
</ion-item>

Sufix Fixed

<ion-item>
    <ion-label position="stacked">
        Sufix Fixed
    </ion-label>
    <ion-input formControlName="sufixFixed" type="text" [ionic-mask]="{sufix: '@email.com', fixed_morpheme: true,  type: 'text'}" value=""></ion-input>
    <ion-note>Output: {{form.value.sufixFixed}}</ion-note>
</ion-item>

Separators (thousands '.' and decimals ',')

<ion-item lines="full">
    <ion-label position="stacked">
        Separators (thousands '.' and decimals ',')
    </ion-label>
    <ion-input  formControlName="separators"  type="text" [ionic-mask]="{type: 'number', thousand_separator: '.', decimal_separator: ','}" value=""></ion-input>
    <ion-note>Output: {{form.value.separators}}</ion-note>
</ion-item>

Decimal places

<ion-item>
    <ion-label position="stacked">
        Decimal places (3)
    </ion-label>
    <ion-input formControlName="decimal" type="text" [ionic-mask]="{ decimal_places: 3}" value=""></ion-input>
    <ion-note>Output: {{form.value.decimal}}</ion-note>
</ion-item>

Parâmetros

| Parâmetro | Descrição | | :-------- | :-------- | | [ion-mask] | Objeto da interface "IonicMaskInterface" irá definir a formatação da máscara utilizada|

IonicMaskInterface

Interface do objeto que será passado como parâmetro | Atributo | Tipo | Valor padrão | :--- | :---: | :---: | |type | string | number |prefix | string | null |sufix | string | null |fixed_morpheme | boolean | false |thousand_separator | string | , |decimal_separator | string | . |decimal_places | number | 2

Ecossistema

| Tecnologia | Versão | Links | | ------- | ------- | :-----:| | ionic | | ionic@changelog | | Angular | | angular@documentation |

Versões suportadas

• Ionic 6: >= 6.0.0
• Angular 15: >= 15.0.0

Contribuições

Pull requests são bem vindos. Para mudanças importantes, abra um problema primeiro para discutir o que você gostaria de mudar.