nbfontana / ngx-currency Goto Github PK
View Code? Open in Web Editor NEWCurrency mask module for Angular ๐ฆ
Home Page: https://nbfontana.github.io/ngx-currency
License: MIT License
Currency mask module for Angular ๐ฆ
Home Page: https://nbfontana.github.io/ngx-currency
License: MIT License
I had a problem with ngx-currency in mobile phone, because when you delete all text field you dont get fill correctly.
I would love to have an enhancement where a decimal ('.') could be typed in instead of automatically appearing
example: text-mask
In this demo, if you select "US dollar amount (allows decimal)" from the dropdown list, the decimal does not appear until a user has typed it in
Thank you very much for creating ngx-currency. Loving it!
hi, I want to use your ngx-currency in my project, but it does not work for Reactive Form.Could you explain it how can I use ngx-currency in Reactive Form for input tag
Hi
When I use currencyMask on a with readonly property, readonly is ignored.
<input type="tel" matInput placeholder="Subtotal" formControlName="valorTotal" currencyMask readonly="true">
Even with readonly property set to true, I can change de control value.
Tried using this package and it works really well.
Would like to discuss the posibility to add a "minus" charachter as the first input in a field.
The users of the system my team is building are used to this workflow when entering numbers.
I made it work on my machine but the question is if you think it should be entered here or if I should fork this project and make my own version for my specific needs.
Thanks!
We have users complaining that when they want to type in for example $100, they actually have to type in "10000" because of the decimal places.
The problem is that the input always happens from the least significant digit, in the fraction/decimal part, where our users most common use case is from the whole unit part onwards.
The suggestion is to let the user type in "100" and only apply the mask after blurring the control, instead of on every keypress.
I am happy to attempt this work myself, but I'm not quite sure where to start.
Hello,
Currently I am having the following error "TypeError: Cannot set property 'align' of undefined" as I run karma test with any components that make use of the CurrencyMaskModule.
I am using Angular 6 and the v1.5.0 of ngx-currency.
I had the exact same issue with v5.3.1 of ng2-currency-mask.
The error disappears as I comment line 33 of the currency-mask.directive.js
this.elementRef.nativeElement.style.textAlign = this.options.align ? this.options.align : this.optionsTemplate.align;
This issue only appears with ng test but nothing wrong with the ng serve.
Any ideas?
Hi, first of all, thanks for this great library!
I am working on an internationalised application that supports multiple languages, locales and currencies.
All the displayed currencies are formatted using the Angular CurrencyPipe ( https://angular.io/api/common/CurrencyPipe ), so we never specify what decimal separator needs to be used because the pipe picks the correct one for us based on the locale.
Now want to use this library in our forms; however, we don't want to specify the decimal separator or currency symbol manually but we would like to have it inferred from the locale as well; is there a way to integrate it with the CurrencyPipe or make it work seamlessly?
Not working!
<input [(ngModel)]="valor_frete" currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',' }" class="input-default validateFormat validadeNumber calculaTotal" id="frete_pedido" name="frete_pedido" type="text">
Working
<input currencyMask [options]="{ prefix: '', thousands: '.', decimal: ',' }" class="input-default validateFormat validadeNumber calculaTotal" id="frete_pedido" name="frete_pedido" type="text">
The min validator when added does not make the control or the form invalid. When a custom validator is added, the handler is never triggered.
Hello, i'm using your library accross my application. It works really fine but i have an issue.
When I type on input field it inserts the numbers starting from the decimals, I would need it to insert them starting from the integers. it's possible?
If the placeholder text is aligned left, and the user clicks the input where the placeholder text begins, the cursor will appear before the placeholder text and append the placeholder text when typing
Example:
placeholder='0.00'
Result from clicking at beginning of placeholder text: 30.00
Expected Result: 0.03
Version 2.0.2.
In case you don't want to see the zero inside the input and set an option {nullable: true}
, it throws an error to console and crashes your validation or any other interaction with an input.
CurrencyInputComponent.html:2 ERROR TypeError: Cannot read property 'length' of null at InputHandler.push../node_modules/ngx-currency/src/input.handler.js.InputHandler.handleInput (input.handler.js:18) at CurrencyMaskDirective.push../node_modules/ngx-currency/src/currency-mask.directive.js.CurrencyMaskDirective.handleInput (currency-mask.directive.js:66) at Object.eval [as handleEvent] (CurrencyInputComponent.html:2) at handleEvent (core.js:43993) at callWithDebugContext (core.js:45632) at Object.debugHandleEvent [as handleEvent] (core.js:45247) at dispatchEvent (core.js:29804) at core.js:42925 at HTMLInputElement.<anonymous> (platform-browser.js:2668) at ZoneDelegate.invokeTask (zone-evergreen.js:391)
Moreover, this happens only on mobiles. Everything is fine in a desktop browser, except when you open a dev tools in a browser and set a resolution to any of mobiles devices (e.g., toggle device toolbar button in Crome dev-tools).
One more thing, currently in case you set an option {nullable: false}
- you will see the zero only in desktop browsers, nor on mobiles. I mean that you can completely clean the input on mobiles.
Thanks. Looking forward to a fix!
First of all, Obrigado!
I would like to re-open this issue:
#28
Can you please elaborate on how to make it work, using currencyMask together with readonly flag ?
Current the input still editable.
Thanks
Hello everyone!
I'm trying to use ngx-currency but, I' getting an error on change the value of the input
TypeError: Cannot read property 'apply' of undefined
at CurrencyMaskDirective.handleBlur (currency-mask.directive.js:45)
I have no idea to solve that, somebody could help me?
The snip code:
<ion-input currencyMask type="tel" [options]="{ suffix: 'km', thousands: '.', decimal: ',' }" name="kmMedia" [(ngModel)]="ivecoTCO.aplicacao.kmMediaAnual"></ion-input>
The installation I followed the documentation.
System data:
Ionic:
ionic (Ionic CLI) : 4.6.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.1
Cordova:
cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 4 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/ibere/Library/Android/sdk)
ios-deploy : 1.9.1
ios-sim : 5.0.8
NodeJS : v8.11.1 (/usr/local/bin/node)
npm : 6.5.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61
When run angular build prod command i get de following error
`
ERROR in ./node_modules/ngx-currency/fesm5/ngx-currency.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
`
my dependencies
`
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/forms": "^8.2.14",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "4.3.1",
"@nebular/eva-icons": "4.3.1",
"@nebular/security": "4.3.1",
"@nebular/theme": "4.3.1",
"@swimlane/ngx-charts": "^10.1.0",
"angular-tree-component": "7.2.0",
"angular2-chartjs": "0.4.1",
"angular2-toaster": "^7.0.0",
"bootstrap": "4.3.1",
"chart.js": "2.7.1",
"ckeditor": "4.7.3",
"classlist.js": "1.1.20150312",
"core-js": "2.5.1",
"echarts": "^4.6.0",
"eva-icons": "^1.1.2",
"intl": "1.2.5",
"ionicons": "2.0.1",
"leaflet": "1.2.0",
"nebular-icons": "1.1.0",
"ng2-ckeditor": "^1.2.6",
"ng2-completer": "2.0.8",
"ng2-smart-table": "1.3.5",
"ngx-currency": "^2.2.1",
"ngx-echarts": "^4.2.2",
"node-sass": "^4.13.0",
"normalize.css": "6.0.0",
"pace-js": "1.0.2",
"roboto-fontface": "0.8.0",
"rxjs": "6.5.4",
"rxjs-compat": "6.3.0",
"socicon": "3.0.5",
"tinymce": "4.5.7",
"tslib": "^1.10.0",
"typeface-exo": "0.0.22",
"web-animations-js": "github:angular/web-animations-js#release_pr208",
"zone.js": "~0.9.1"
},
`
When highlighting a portion of the text, the delete key does not work.
I modified the code to not ignore partially highlighted text and I did not find any negative impacts.
Here is the modified code below. Can you tell me if there is a problem with doing it this way?
InputHandler.prototype.handleKeydown = function (event) {
var keyCode = event.which || event.charCode || event.keyCode;
if (keyCode == 8 || keyCode == 46 || keyCode == 63272) {
event.preventDefault();
var selectionRangeLength = Math.abs(this.inputService.inputSelection.selectionEnd - this.inputService.inputSelection.selectionStart);
if (selectionRangeLength >= (this.inputService.rawValue.length - this.inputService.prefixLength())) {
this.clearValue();
} else {
this.inputService.removeNumber(keyCode);
this.onModelChange(this.inputService.value);
}
}
};
See stackblitz here: https://stackblitz.com/edit/ngx-currency-percent
You can put any number of percent signs in the input. It doesn't appear to have any impact on the value, but it is inconsistent since the directive blocks all other non-numeric characters.
Running ngcc
against an Application using Angular v9-rc.6 fails to compile. Please see the following screenshot below.
It might be related on how this component is built? Issues in Angular that might have a clue on how to fix ngx-currency
in Angular v9:
Thanks for this great and useful little library. It is only one feat. short of suiting my needs. In most case my user deals with integer (precision 0), but in some case it might want to type a dot '.' to enter a fractional amount. In this case I would rather having the parser interpret the dot '.' and not ignore it making the amount larger by adding two digits
Given a precision of 0,
typing 1234 should give $1'234
typing 1234.56 should give $1'234.56 and not $123'456
I have updated to Angular 8.2.14
and ngx-currency 2.2.0
and I got the following error:
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ngx-currency' in '/path-to-project'
Usage:
import { NgxCurrencyModule } from 'ngx-currency';
@NgModule({
imports: [
...
NgxCurrencyModule,
...
],
})
export class AppModule {
}
The module exists in the node_modules/ngx-currency
directory, but I can't get it working again.
Any ideas?
Thanks team for creating a very useful component.
But seem that it cannot work fine with Angular 6, so please help to check this issue?
Appreciate if you can give me an advise if this is not an issue.
Thanks team
If the placeholder text is aligned left, and the user clicks the input where the placeholder text begins, the cursor will appear before the placeholder text and append the placeholder text when typing
Example:
placeholder='0.00'
Result from clicking at beginning of placeholder text: 30.00
Expected Result: 0.03
I'd like to add a maxlength to my inputs, but I'm having an issue where non-number characters (R$, spaces, dots and commas) count towards the total length.
I want pick the value only after change the input value, I need to make a sum after typing the value.
<input currencyMask [(ngModel)]="baixa.juros" (ngModelChange)="setJuros($event.target.value)" [options]="{ prefix: '', thousands: '.', decimal: ',', allowNegative: false }" name="valor_juros" id="valor_juros_liq" class="input-default" />
It does not work because it calls the function with each keyup
When using ngx-currency with Angular 7 we get the folowing error: Can't bind to 'options' since it isn't a known property of 'input
We need to upgrade it to work with newer versions.
It should work in a environment like this:
Angular CLI: 7.3.3
Node: 10.15.3
OS: win32 x64
Angular: 7.2.7
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
how can i clear value ?
when i insert value into input then i cant clear its value and value is 0
but i want to be able to clear value(null)
If we copy amount 100 without decimal like 100.00 then it's pasted as 1.00. please check and fix the same.
response > "The build has been terminated", but not finish
I see no mention of how to use the directive on an input and some of the examples don't even render. This is on both Chrome and Safari on Mac.
Please, add option to append zeros. Ex: input value: 10, when blur occours, value change to 10.00
I'm using this component with a Angular 5.2.0 project, and it's working fine.
My suggestion is to confirm that component works fine with Angular 5.x and maybe test with Angular 6.
Confirming these expectation, it will be nice to remove reference that works with Angular >= 2 and < 5.
Att,
Eduardo Ribeiro da Silva
I have a input control, which uses currencyMask and readonly directive.
When I opened the form, the input was readonly grey background, but I could still enter or using keyboard on it, it's not working
<input type="text" formControlName="rateNew" id="rateNew" [(ngModel)]="model.rateNew" placeholder="..." readonly="readonly" currencyMask [options]="rateMaskOptions" />
put negative sign before
I have the following global config
const CustomCurrencyMaskConfig: CurrencyMaskConfig = {
align: 'right',
// ...
}
But everything is still aligned to the left. I can use inline options like below, which do work
[options]="{align: 'right'}"
How does this project differ from https://github.com/cesarrew/ng2-currency-mask?
I follow the steps, and get this error:
Can't bind to 'options' since it isn't a known property of 'input
Angular CLI: 7.3.3
Node: 10.15.3
OS: win32 x64
Angular: 7.2.7
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
@angular-devkit/architect 0.13.3
@angular-devkit/build-angular 0.13.3
@angular-devkit/build-optimizer 0.13.3
@angular-devkit/build-webpack 0.13.3
@angular-devkit/core 7.3.3
@angular-devkit/schematics 7.3.3
@angular/animations 7.2.11
@angular/cli 7.3.3
@ngtools/webpack 7.3.3
@schematics/angular 7.3.3
@schematics/update 0.13.3
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0
When you're using currencyMask
with strictNullChecks
you always get an erorr when assigning null|unknown as value to it.
Suggestion:
Changing value writers & getters to number|unknown
Angular4 - Are there any polyfills we can add, so that the Currency indicator works in IE
We'd like to be able to set the thousands separator to null in order to get the "numeric-only" benefit of the mask, without having to have spaces in between the digits.
We'd really like to use this mask though, as opposed to a simple number mask, because we have dynamically created "number" input controls which are then defined either to have a thousands separator or not, but they all need to use the same mask.
Currently, setting thousands to null results in the string "null" being used as the separator.
Hey guys.
I'm trying to get ssr to work, but I'm getting the following error:
/home/lucaswxp/reduza/universal-starter/node_modules/ngx-currency/src/currency-mask.directive.js:1
(function (exports, require, module, __filename, __dirname) { import { Directive, ElementRef, forwardRef, HostListener, Inject, KeyValueDiffers, Input, Optional } from "@angular/core";
^^^^^^
SyntaxError: Unexpected token import
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (internal/modules/cjs/loader.js:618:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)
at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
at Function.Module._load (internal/modules/cjs/loader.js:498:3)
at Module.require (internal/modules/cjs/loader.js:598:17)
at require (internal/modules/cjs/helpers.js:11:18)
I'm not sure what to do, I can make a PR if you guys point the way. It know it has something to do with commonjs.
Hello,
I got this error when using ngx-currency with material input.
<input matInput type="number" placeholder="0" formControlName="buildingValue" required currencyMask >
TypeError: Cannot read property 'createRange' of undefined
at InputManager.get [as inputSelection] (input.manager.js:46)
at InputManager.get [as canInputMoreNumbers] (input.manager.js:27)
at InputService.get [as canInputMoreNumbers] (input.service.js:137)
at InputHandler.push../node_modules/ngx-currency/src/input.handler.js.InputHandler.handleKeypress (input.handler.js:82)
at CurrencyMaskDirective.push../node_modules/ngx-currency/src/currency-mask.directive.js.CurrencyMaskDirective.handleKeypress (currency-mask.directive.js:76)
Angular CLI: 7.3.9
Node: 10.16.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
It would be great to support a minimum and maximum value. I'm working on this now.
Hi
With the use of ngx-currency in an input field, how can i force the use of numeric keyboard on iOS and Android devices?
Thank you
Is there a way to use it without input? For example:
<p>This shoes costs <span currencyMask>{{priceTag}}</span></p>
// Or
<input currencyMask [value]="priceTag" />
When I try and use this with an <ion-input currencyMask></ion-input>
an error is presented that says:
More than one custom value accessor matches form control with unspecified name attribute
It works fine when I use it with a standard <input>
tag, but then I lose all of the ionic features of an ion-input. Any ideas how to fix this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.