To install ,ion-currencymask run:
$ npm install @pluritech/ion-currencymask --saveand then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
// Import the library
import { IonCurrencyMaskModule } from '@pluritech/ion-currencymask';
@NgModule({
declarations: [
HomePage
],
imports: [
BrowserModule,
IonicModule,
// Import the module
IonCurrencyMaskModule
],
providers: [],
bootstrap: [IonicApp]
})
export class AppModule { }Once your library is imported, you can use its components in your Ionic application: This exemple used on code of showed in demo above
<!-- You can now use your library component in home.html -->
<ion-content padding>
<p>
The demo of the ion-currency-mask working in Reactive Forms
</p>
<form [formGroup]="formTest" (ngSubmit)="onSubmit()" >
<ion-list>
<!--the selector ion-currency-mask already has an ion-item themselves-->
<ion-currency-mask
placeholder="Insira o valor aqui"
label="Valor R$"
formControlName="maskMoney">
</ion-currency-mask>
<ion-item>
<p>{{formTest.value | json}}</p>
</ion-item>
</ion-list>
</form>
</ion-content>In controller page
// ... Hidden unnecessary code
export class HomePage {
public formTest: FormGroup;
constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
this.formTest = formBuilder.group({
maskMoney: ['', Validators.required]
});
}
// ... Hidden unnecessary code
}| Parameter | Type | Description |
|---|---|---|
| placeholder | string | a value to placeholder of ion-input |
| label | string | a value to ion-label |
| typeLabel | string | a type to ion-label. Values: stacked - fixed - floating . More info: Ionic Doc - Label |
| clearInput | boolean | true to add clearInput on ion-input. Default: false without clearInput . More info: Ionic Doc - Input |
| lastChild | boolean | if the ion-currency-mask is the last of ion-list send true, Default: false |
| disabled | boolean | true to disabled the input. Default: false |
Feel free to make your pull request, chip in to suggestion or report issues.
We used the core code made by Marlos Irapuan inspired on http://jsbin.com/heqeduyi/1/edit?html,output and we made some improvement to separate it into pieces of thousands. More info see: MaskMoney no Ionic 2
MIT © Lucas Correa
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent