How to allow only a number (digits and decimal point) to be typed in an input?

by

I wrote a working CodePen example to demonstrate a great way of filtering numeric user input. The directive currently only allows positive integers, but the regex can easily be updated to support any desired numeric format.

My directive is easy to use:

<input type="text" ng-model="employee.age" valid-number />

The directive is very easy to understand:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('validNumber', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if(!ngModelCtrl) {
        return; 
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (angular.isUndefined(val)) {
            var val="";
        }
        var clean = val.replace( /[^0-9]+/g, '');
        if (val !== clean) {
          ngModelCtrl.$setViewValue(clean);
          ngModelCtrl.$render();
        }
        return clean;
      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
});

I want to emphasize that keeping model references out of the directive is important.

I hope you find this helpful.

Big thanks to Sean Christe and Chris Grimes for introducing me to the ngModelController

More Related Contents:

  1. angular ng-bind-html and directive within it
  2. How to call a method defined in an AngularJS directive?
  3. How to use a keypress event in AngularJS?
  4. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  5. Angularjs dynamic ng-pattern validation
  6. What is the difference between ng-app and data-ng-app?
  7. Easiest way to pass an AngularJS scope variable from directive to controller?
  8. Using angularjs filter in input element
  9. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  10. Directive isolate scope with ng-repeat scope in AngularJS
  11. calling method of parent controller from a directive in AngularJS
  12. Enable angular-ui tooltip on custom events
  13. Accessing attributes from an AngularJS directive
  14. Custom form validation directive to compare two fields
  15. How to modify scope from within a directive in AngularJs
  16. Binding variables from Service/Factory to Controllers
  17. Call a method of a controller from another controller using ‘scope’ in AngularJS
  18. AngularJS custom form component / directive using ng-model
  19. How can you limit the value from input using AngularJS?
  20. How to set the dynamic controller for directives?
  21. Can you change templateUrl on the fly?
  22. Pass form to directive
  23. Enable/Disable Anchor Tags using AngularJS
  24. What is `priority` of ng-repeat directive can you change it?
  25. Illegal use of ngTransclude directive in the template
  26. Understanding the transclude option of directive definition?
  27. angularjs text area character counter
  28. ng-click doesn’t work within the template of a directive
  29. creating a new directive with angularjs
  30. AngularJS – Directives vs Controllers

Leave a Comment