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.