angular-weblineindia-currency-input v1.0.0
AngularJS - Currency Input Component
Currency Input component is build in AngularJS, used for currency value input field for all countries. You can change prefix and sufix for input. Can also handle negative and positive values depending on requirement.
Table of contents
- Demo
- Getting started
- Quick fixes
- Want to Contribute?
- Need Help / Support?
- Collection of Other Components
- Changelog
- Credits
- License
- Keywords
Demo
Getting Started
Installing and Importing
Install the package by command:
npm install angular-weblineindia-currency-input --save
Import the module
import { NgxCurrencyModule } from "angular-weblineindia-currency-input";
@NgModule({
imports: [
...
NgxCurrencyModule
],
declarations: [...],
providers: [...]
})
export class AppModule {}
Using
<input currencyMask formControlName="value" />
ngModel
An attribute of type number. If is displayed'$ 25.63'
, the attribute will be'25.63'
.
Options
You can set options...
<!-- example for pt-BR money -->
<input
currencyMask
formControlName="value"
[options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
/>
Available options:
align
- Text alignment in input. (default:right
)allowNegative
- Iftrue
can input negative values. (default:true
)decimal
- Separator of decimals (default:'.'
)precision
- Number of decimal places (default:2
)prefix
- Money prefix (default:'$ '
)suffix
- Money suffix (default:''
)thousands
- Separator of thousands (default:','
)nullable
- when true, the value of the clean field will benull
, when false the value will be0
min
- The minimum value (default:undefined
)max
- The maximum value (default:undefined
)inputMode
- Determines how to handle numbers as the user types them (default:FINANCIAL
)
Input Modes:
FINANCIAL
- Numbers start at the highest precision decimal. Typing a number shifts numbers left. The decimal character is ignored. Most cash registers work this way. For example:- Typing
'12'
results in'0.12'
- Typing
'1234'
results in'12.34'
- Typing
'1.234'
results in'12.34'
- Typing
NATURAL
- Numbers start to the left of the decimal. Typing a number to the left of the decimal shifts numbers left; typing to the right of the decimal replaces the next number. Most text inputs and spreadsheets work this way. For example:- Typing
'1234'
results in'1234'
- Typing
'1.234'
results in'1.23'
- Typing
'12.34'
results in'12.34'
- Typing
'123.4'
results in'123.40'
- Typing
You can also set options globally...
import { CurrencyMaskInputMode, NgxCurrencyModule } from "angular-weblineindia-currency-input";
export const customCurrencyMaskConfig = {
align: "right",
allowNegative: true,
allowZero: true,
decimal: ",",
precision: 2,
prefix: "R$ ",
suffix: "",
thousands: ".",
nullable: true,
min: null,
max: null,
inputMode: CurrencyMaskInputMode.FINANCIAL
};
@NgModule({
imports: [
...
NgxCurrencyModule.forRoot(customCurrencyMaskConfig)
],
declarations: [...],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}
Quick fixes
Ionic 2-3
Input not working on mobile keyboard
<!-- Change the type to 'tel' -->
<input currencyMask type="tel" formControlName="value" />
Input focus get hide by the mobile keyboard
on HTML
<!-- Change the type to 'tel' -->
<input
currencyMask
type="tel"
formControlName="value"
[id]="'yourInputId' + index"
(focus)="scrollTo(index)"
/>
on .ts
import { Content } from 'ionic-angular';
export class...
@ViewChild(Content) content: Content;
scrollTo(index) {
let yOffset = document.getElementById('yourInputId' + index).offsetTop;
this.content.scrollTo(0, yOffset + 20);
}
Want to Contribute?
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
- Fork it.
- Create new branch to contribute your changes.
- Commit all your changes to your branch.
- Submit a pull request.
Collection of Components
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.
Changelog
Detailed changes for each release are documented in CHANGELOG.md.
Credits
angular-weblineindia-currency-input is inspired by ngx-currency.
License
Keywords
angularjs-currency, angular-currency-input, angular-input-component, angularjs-input-field, input-field, currency-input
4 years ago