Ionic-mask NPM

@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>