AngularJS handle formatted number input

Question

How can I allow values like "1,200" in a number field in angular?

My users do a lot of copy/pasting of values, and they like the number formatting throughout. The problem is that the default setup for angular input[type=number] will throw an error when one of these formatted values is pasted back in.

Here is a plunk forked from this page:

http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

Notice that when you copy a formatted value (like the 1,200 it starts with) and paste it back into the input box it breaks.

How can I best handle this? It seems like this is something that would have been handled before, but I am having a hard time tracking anything down. I do not need anything robust. I am fine with modifying the input text to remove formatting, and I can assume a standard en-us format.

You can add a filter to the input to sanitize it. This will change to input as you type it. — SoluableNonagon, Sep 11 '14 at 17:50
or a directive: http://stackoverflow.com/questions/15343068/using-angularjs-filter-in-input-element — SoluableNonagon, Sep 11 '14 at 17:51
Google Chrome does not allow bad values in the number input, it will not set the internal value if it is invalid. — TheSharpieOne, Sep 11 '14 at 18:14

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

You can have a custom directive on a regular input(type=text) field to format the data as a number always

Your directive would look something like

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

Source

edited May 23 '17 at 10:26

Community

1
1

answered Sep 11 '14 at 18:33

Prasad K - Google

2,584
1
16
18

Thanks, I found that answer too and gave it a go. It is working well enough. Though it looks like the $formatter does not work for whatever reason and can be removed. Version 2 of http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview. – Malk Sep 11 '14 at 19:24

score 1 · Answer 2 · answered Sep 11 '14 at 19:40

Here is the solution I went with:

app.directive('appType', function () {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      // Custom number validation logic.
      if (attrs.appType === 'number') {
        return ctrl.$parsers.push(function (value) {

          var v = value.replace(/,/g,''),
              valid = v == null || isFinite(v);

          ctrl.$setValidity('number', valid);

          return valid && v != null ? Number(v) : undefined;
        });
      }
    }
  };
});

This is thanks to the link I found using all your feedback: http://blakeembrey.com/articles/angular-js-number-validation-bug/

Updated plunker: http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

AngularJS handle formatted number input

2 Answers2