Angular: amount input field

Scenario:

As a user I would like to have a possibility to enter numbers with my localized separators.

Example of such number regionalization can be found here

var number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"<span id="mce_SELREST_start" style="overflow:hidden;line-height:0;">&#65279;</span>

 

It would be great to have such ‘regionalization‘ applied while typing the numbers in the input field.

Sadly, it is not that easy to do this.

For example, if we would like to use what browser offers – the NumberFormat object that is above (not all browser have it see page section ‘Browser Compatibility’), we need a function that could upon the user localization do the reverse transformation to simple number notation in JavaScript while typing.

input-field-with-regionalization

The method for displaying a number in right user localization is easy and we saw the example above – so this part is done right away. But doing the opposite conversion is missing!! We don’t have it!!!

What makes matters worse, if we would like to cover such transformation we would have to prepare an implementation for dozens of regions!!! That are compatible with what NubmerFormat implementation offers!

We would also need to allow only valid characters in the input field, where these ‘valid characters’ differ amoung the regions i.e.

Example 1: German number notation  is – 123.456,789

Example 2: India number notation  is – 1,23,456.789

As you can see the COMMA and DOT have diffrent meenings in diffrent countries.

This means we need a specific MASKING for diffrent region….

In JavaScript such masking can be done with: https://www.npmjs.com/package/angular2-text-mask

So far, we saw that there are more and more obstacles…

How can we tackle the problem?

Below is a solution, that in my opinion should do the job.

input-field-with-regionalization-2

I will provide example in angular soon.

 

Advertisements