CODEWITHSUNDEEP
angularjs
Thomas
Thomas

Reputation: 247

Input field number format AngularJS

I have the following input field:

<input type="text" class="span2" ng-model="mynumber">

mynumber has the value 0.55 which is loaded on pageload from a rest service. My problem is now, how can I format the number for different languages/countries? For example, in German, the value should be formatted with a comma (,) instead of a period (.). And if the user changes the number the number should be converted to . instead of ,, if I send it back to the rest service.

This should also work for larger numbers like 90,000.00, which should be 90.000,00 in German...

If I use the angular-locale_de-at.js, I can format the number on a normal output with this:

{{mynumber | number}}

but that does not work for an input field.

How can I handle this? The values should be (printed) formatted in the input field.

If I canage the type of the input field to number

<input type="number" class="span2" ng-model="mynumber">

it works in chrome but not in IE or FF. in chrome i get 0,55. but not in other browsers.

any ideas?

Upvotes: 2

Views: 8790

Answers (2)

Florian
Florian

Reputation: 3366

Mh,

my first idea would be to separate the concerns here. You're having the model mynumber on the one side and the representation on the other side. Those are distinct from my point of view.

So what you can do is to introduce a directive (I once did this for date values in AngularJS 1.1.5, so bit a bit of additional hacking could be necessary):

First we introduce a directive:

<input type="text" class="span2" ng-model="mynumber" number-format>

with the code: 

var app = angular.module("your.directives", ['your.filters']);
app.directive("numberFormat", [
  '$filter', function(filter) {
    return {
      replace: false,
      restrict: "A",
      require: "?ngModel",
      link: function(scope, element, attrs, ngModel) {
        var numberFormat;
        if (!ngModel) {
          return;
        }
        ngModel.$render = function() {
          return element.val(ngModel.$viewValue);
        };
        var numberFilter = filter('myNumberFilter');
        return ngModel.$formatters.push(function(value) {
          return numberFilter(value);
        });
      }
    };
  }
]);

What you need for this, is a working myNumberFilter filter present, which could decide based on the language given (however you determine this) how to format the input value.

EDIT: I noticed, that AngularJS has it's own number filter, so i changed the name called. Let's add our own:

var app = angular.module("your.filters", []);

app.filter("myNumberFilter", ['SiteLanguage', 
  function(siteLanguage) {
    return function(number) {
      var language = siteLanguage.getLanguage(); //I assume you have a service that can tell you the current language
      switch(language) {
          case "de":
          // return the variant of number for "de" here
          break;
          case "fr":
          // return the variant of number for "fr" here
          break;
          default:
          // return english variant here.
          break;
        };
    }
  ]
});

You'll probably need a formatter function for the individual countries (instead of blindly relying on angular locale. And you probably need a service SiteLanguage which will give you the language on the current site.

Hope this helps :)

Upvotes: 0

David Votrubec
David Votrubec

Reputation: 4156

I've written the directive you are looking for. See the code on GitHub.

Also see this answer on SO Using AngularJS directive to format input field while leaving scope variable unchanged

It will probably not work with <input type="number"/>, use <input type="text"/> instead

Upvotes: 1

Related Questions