bcherny / format-as-currency Goto Github PK

View Code? Open in Web Editor NEW

32.0 4.0 24.0 36 KB

Angular directive to format an input as a currency as the user types

Home Page: http://bcherny.github.io/format-as-currency/demo

License: Other

JavaScript 100.00%

format-as-currency's Introduction

format-as-currency

Angular directive to format an input as a currency as the user types. Like autoNumeric for Angular.

Demo

http://bcherny.github.io/format-as-currency/demo

Installation

Install via bower or NPM:

Bower: bower install --save format-as-currency
NPM: npm install --save format-as-currency

Usage

<div ng-controller="myController">
  <input
    format-as-currency
    ng-model="value"
    type="text"
  >
</div>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/format-as-currency/format-as-currency.js"></script>
<script>
  angular
  .module('myModule', [
    'bcherny/formatAsCurrency'
  ])
  .controller('myController', function ($scope) {
    $scope.value = '' // currency input value
  })
</script>

With a custom currency symbol

<input
  format-as-currency
  currency-filter="'yuan'"
  ng-model="value"
  type="text"
>
<script>
  angular
  ...
  .filter('yuan', function ($filter) {
    return function (value) {
      return $filter('currency')(value, '¥')
    }
  })
</script>

With a custom currency formatter

<input
  format-as-currency
  currency-filter="'myFilter'"
  ng-model="value"
  type="text"
>
<script>
  angular
  ...
  .filter('myFilter', function () {
    return function (value) {
      return '¥' + value
    }
  })
</script>

With a module loader

Browserify

var formatAsCurrency = require('format-as-currency')
angular.module('myModule', [formatAsCurrency])

Rollup

import * as formatAsCurrency from 'format-as-currency'
angular.module('myModule', [formatAsCurrency])

Webpack

var formatAsCurrency = require('format-as-currency/src/format-as-currency')
angular.module('myModule', [formatAsCurrency])

Running the tests

npm test

Contributing

Contributions are welcome! Please be sure to:

File an issue for the problem that your PR addresses
Test your fix thoroughly
Follow the existing code style
Add unit tests to cover your feature, or to prevent future regressions

format-as-currency's People

Contributors

Stargazers

Watchers

format-as-currency's Issues

Add support for suppressing the currency symbol

First of all, thank you for your work creating this directive!

It would be nice to configure the directive to suppress the currency symbol in case users do not want to see the $ (or their localized symbol) in the text input.

Moving the cursor to the dollar sign and typing non-numeric characters

If you move the cursor (using arrows or click) to either side of the $ and type non-numeric characters, the characters will show up, whereas in any other place they will not show up.

@bcherny if you agree that this is an issue I will take a look and see if i can submit a PR

'const' not supported in ie<=10

const CURRENCY_SYMBOL = $locale.NUMBER_FORMATS.CURRENCY_SYM

causes a script error in ie10 and below.

add support for custom currency format function

Negative amounts?

How to handle amounts < 0? In previous versions, I believe that the formatter worked correctly, converting an entry like "-10.00" to "($10.00)", but the angular binding is not updating the model with the negative value. In the current release, the formatter doesn't work either, and doesn't appear to allow a negative value at all.

Custom filter doesn't format input value properly.

When I want to use my own currency via currency-filter="myCurrency", the displayed value in the input isn't formatted as expected e.g. USD12222.00, instead of USD12,222.00.

Here is my filters:

angular.module('app')
    .filter('myCurrency', myCurrency);

function myCurrency() {
    return function (value) {
        return 'USD' + value; 
    };
}

and HTML:

<input type="text" format-as-currency currency-filter="myCurrency" name="fee" ng-model="Nego.fee">

Doesn't accept currency filter arguments

Refer to: https://docs.angularjs.org/api/ng/filter/currency.

This would allow to change the currency symbol or fraction size quickly from a directive attribute,

17.99 changed to 17.89

any other number like 17.33, 12.56, 74.55 work, it only happens with 17.99 ==> 17.89
any idea ?

Add support for minification

No way to make field not required

not much more to say other than the title of the issue...

Update bower.json for Angular 1.5.x

The bower dependency should be updated to prevent having to force the bower install when using Angular 1.5.

Something like:

"angular": ">=1.3 <1.6"

Typing space causes strange behavior

typing space moves the cursor forward without changing the values. I think the best solution is probably to ignore the space character completely but not sure if this might be an issue under any circumstances.

@bcherny again, if you agree that this is an issue I will take a look and see if i can submit a PR

Doesn't play nicely with SwiftKey

$|0.00 (| is cursor)
Type 555. On typing the third digit, format-as-currency adds the comma (,) which selects (makes selection) of the here-bold-text: '$5**,55**0.00'.

There is some issue with the decimals too.

This is probably out-of-scope but it could be thought of in the future. Mobile is taking over and SwiftKey is pretty popular.

Thanks.

typing manually 0.9999 causes strange behavior

With every 9 i add, it adds a cent.
typing 0.9999 should not be 1.01
typing 0.99999 should not be 1.02

maybe this is interesting for someone http://plnkr.co/edit/8mT3EA?p=preview in this i really like it to see the real value thats behind

Changes from 10$ to 1000$

Type in $10.00
Hit backspace 3 times starting from the end $10.00<-- here
it will say $1000

Fix for Custom Currency Symbol

Hi,

This is not an Issue but a possible fix for a possible issue 😄

In my Angular App i've got a customizable currency symbol and i use a real time database (Firebase).

In your function 'toFloat' from 'formatAsCurrencyUtilities' you provide a solutions only for Dollar Symbol with the RegEx on line 53.

To Avoid error from this i replaced that line with:

    var matchString = 0;
    if (currencyString) matchString = currencyString.match(/(\d|\.)/g).join('');
    return parseFloat(matchString, 10);

With this you can user any filter, with any currency.

Support min / max config options

I was thinking something like

<input type="text" name="input" ng-model="amount" min="0.01" max="{{modelVal}}" format-as-currency>

I will be happy to make this change, and possibly others, and submit a PR as long as you (the maintainer) are open to PR submissions.

Awesome work, this is a very handy directive