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. <input ng-model="myModel | filterToSanitize"> — SoluableNonagon
– SoluableNonagon, Commented Sep 11, 2014 at 17:50
Google Chrome does not allow bad values in the number input, it will not set the internal value if it is invalid. — TheSharpieOne
– TheSharpieOne, Commented Sep 11, 2014 at 18:14

Community · Accepted Answer · 2017-05-23 10:26:23Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Sep 11, 2014 at 18:33

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malk Over a year ago

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 plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview.

Malk · Accepted Answer · 2014-09-11 19:40:40Z

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

Collectives™ on Stack Overflow

AngularJS handle formatted number input

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related