salte-io / ng-currency

Currency with AngularJS made easy!
MIT License
154 stars 70 forks source link

is there an option to have the last two numbers always be formatted as cents? #114

Closed phishy closed 5 years ago

phishy commented 8 years ago

User types: 1010

Directive formats it as: $10.10

This way on mobile, the developer can enable input type="tel", the number pad will pop up, the user can type 4 numbers, and the system will assume the last two are cents. This is how most mobile banking apps work.

I dug around in the source code a little, perhaps I can make a pull request later, but I was just curious if it was already a thing. Moving on for now until I come back to it.

aguirrel commented 8 years ago

Hi @phishy! You can use the example in /test/ng-currency/ng-currency.directive.spec.js where a CentsToDollars directive plays with ng-currency ;)

Best regards,

Luis

phishy commented 8 years ago

Thank you! Great work!

On Tuesday, October 11, 2016, Luis Aguirre notifications@github.com wrote:

Hi @phishy https://github.com/phishy! You can use the example in /test/ng-currency/ng-currency.directive.spec.js where a CentsToDollars directive plays with ng-currency ;)

Best regards,

Luis

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aguirrel/ng-currency/issues/114#issuecomment-252999130, or mute the thread https://github.com/notifications/unsubscribe-auth/AABo3KAXSu9pMbg8h8nicFOcnZewMwkBks5qy9ITgaJpZM4KT7BH .

phishy commented 8 years ago

So it's currently not a working part of the library then? I should copy/paste this as a directive into my app?

On Tue, Oct 11, 2016 at 2:14 PM, Luis Aguirre notifications@github.com wrote:

Hi @phishy https://github.com/phishy! You can use the example in /test/ng-currency/ng-currency.directive.spec.js where a CentsToDollars directive plays with ng-currency ;)

Best regards,

Luis

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aguirrel/ng-currency/issues/114#issuecomment-252999130, or mute the thread https://github.com/notifications/unsubscribe-auth/AABo3KAXSu9pMbg8h8nicFOcnZewMwkBks5qy9ITgaJpZM4KT7BH .

cecilia-sanare commented 8 years ago

I think what @aguirrel is trying to say that we've made it so that ng-currency will work with other directives.

He's recommending that you use centsToDollars as an example since it "adds" functionality to ng-currency.

Here's a quick example I created in jsbin.

aguirrel commented 8 years ago

@cecilia-sanare what do you think about adding this functionality? I think type=tel could be a nice workaround for mobile displaying numpad but not being invalidate as type=number.

houmark commented 8 years ago

I know that this complicates things a bit, but I would vote for doing this type of functionality not relying on number nor tel but pattern="[0-9]*" which will also bring up the keypad on iOS and also doesn't show the decimal separators. There's other advantages to this approach also.

cecilia-sanare commented 8 years ago

@aguirrel I'm fine with this functionality being added to ng-currency.

@houmark Do you know if this works similarly on Android and Windows Phone?

houmark commented 8 years ago

@cecilia-sanare As far as I have read it does, but the number keypad is not showing decimals though, which I think is also what we want because ng-currency takes care of the decimals, right?

But I guess only testing and more research can say for sure. But a pattern is better in my opinion than doing tel for a numeric value which is not a phone number, because that seems hacky to me and may break in the future if the OS / browser tries to format the phone number for example.

This pattern may work better if we want the dot presented in the keyboard: pattern="[0-9\.]*"

Also see this page where the author did some tests across OS'es, but also bare in mind that this is a 4 year old article so the pattern support could have improved or changed vastly since then.

cecilia-sanare commented 8 years ago

Just tested this on my Nexus 5x which is running Nougat.

Live Demo Live Demo Output

The number pad only appears on Android if you use type="number".

The only way we could really even support this is if we dynamically changed the input type based on whether the field had focus or not.

Otherwise I don't think ng-currency would be able to insert the currency symbol.

phishy commented 8 years ago

Pardon my ignorance, but why would you want a currency symbol in the model value? I would never insert that into a database that way.

phishy commented 8 years ago

Nevermind, I've answered my own question.

aguirrel commented 8 years ago

@cecilia-sanare and @houmark I have tested pattern in windows phone 8 and 10 and It doesn't work either. I think type=tel could work in all mobiles.

I have just added type="tel" to @cecilia-sanare demo

Live demo with tel Live demo with tel output

Could you guys check if tel works in iphone and android, I have checked in windows 8/10 and works fine.

cecilia-sanare commented 8 years ago

Tel works on Android.

phishy commented 8 years ago

Indeed. I tested in on my Nexus 5 in Chrome and tel works.

On Wednesday, October 12, 2016, Ceci notifications@github.com wrote:

[image: screenshot_20161012-103407] https://cloud.githubusercontent.com/assets/9692284/19316629/c8c5f97e-9067-11e6-9c2c-96ccb634c602.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aguirrel/ng-currency/issues/114#issuecomment-253249612, or mute the thread https://github.com/notifications/unsubscribe-auth/AABo3NZ44ouxYOrnlB0nu7ggV7KAi6i5ks5qzP6XgaJpZM4KT7BH .

houmark commented 8 years ago

My main worry with tel is formatting and if it will always allow say a $ as a part of the value, but the only way to find out is by testing it.

It also opens they number pad on iOS and did allow $ to be in the field, but we for sure need to add novalidate on the field to prevent a browser validating the value because that will create problems either now or in the future.

cecilia-sanare commented 5 years ago

ng-currency has officially entered maintenance mode.

For more information please visit the following issue, #205.