nbfontana/ngx-currency

Currency mask module for Angular 📦

You should test your code...

ngx-currency's Issues

Cannot read property 'apply' of undefined

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

TypeError: Cannot read property 'createRange' of undefined

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

currencyMask with readony

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.

Feature request: change when mask is applied

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.

Add min and max config options

It would be great to support a minimum and maximum value. I'm working on this now.

TypeError: Cannot set property 'align' of undefined

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?

How does this project differ from ng2-currency-mask?

How does this project differ from https://github.com/cesarrew/ng2-currency-mask?

Directive allows % signs

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.

not working

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

Package Version

@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

[BUG] Currency Indicator not displayed in IE (Edge)

Angular4 - Are there any polyfills we can add, so that the Currency indicator works in IE

The limit digits rule from currency is not working

What is the solution for this?

Start input with a negative charachter

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!

Please support latest Angular 6

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

[BUG] In Microsoft Edge browser input field extra 0 issue

[BUG] Clicking input before the placeholder text issue

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

Support Android

I corrected the problem by removing the conditional isChromeAndroid ()

More than one custom value accessor matches form control with unspecified name attribute when using with Ionic 4

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?

clear value

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)

Travis error build

response > "The build has been terminated", but not finish

Typing insert from integer

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?

currencyMask with readony

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

erro on build prod angular 8

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"
},

`

[BUG] Clicking delete with a portion of the text highlighted

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);
        }
    }
};

[FEATURE] Change mask to be based on CurrencyPipe

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?

Supporting strictNullChecks with undefined|null values in currencyMask

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

Does not compile with Angular v9

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:

1. angular/angular#30972
2. angular/angular#32442

Error Fix request: Cannot read property 'length' of null, 2.0.2. version

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!

[FEATURE] Ability to type in decimal point

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!

Copy paste is not formatting the amount properly if we don't have decimals

If we copy amount 100 without decimal like 100.00 then it's pasted as 1.00. please check and fix the same.

Make it work with Angular 7+

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

Using without input

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" />

[FEATURE] Support SSR using @angular/cli and ng-packagr

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.

(change) property not work with currencyMask

(change) element property not work with currencyMask="" and [options]. Like this:

Any ideas?

Add option to append zeros

Please, add option to append zeros. Ex: input value: 10, when blur occours, value change to 10.00

<input readonly> property doesn't work

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" />

Ignore special characters when maxlength is set

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.

Null thousands separator not handled correctly

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.

input negative

put negative sign before

[DOCS] Documentation is broken and doesn't even show an example input

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.

https://nbfontana.github.io/ngx-currency/docs/

Mobile Phone problem

I had a problem with ngx-currency in mobile phone, because when you delete all text field you dont get fill correctly.

Module not found: Error: Can't resolve 'ngx-currency' in

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?

Pick value only after change ngx-currency

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

Reactive Form

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

Clicking input before the placeholder text issue

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

[FEATURE] Dynamic precision

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

Test with Angular 5

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

Global config: align ignored

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'}"

Not working with ngModel

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">

min validator does not work, custom validator not triggered

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.

Numeric keyboard on iOS and Android

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