ionic-mask

Geodata - Agricultura de informação.

Melhorar a vida das pessoas envolvidas no agronegócio através de tecnologia e inovação.

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