Angular Directive for input Numbers only

Question

I am creating a directive to restrict input box to accept numbers only. It should accept 1-9999999999, but no leading 0. It is working but after entering first number it is accepting all numbers and characters. Please help me to resolve this.it should accept 10, but not 01. For this my code is,

HTML:

<input type="text" ng-model="number" required="required" numbers-only="numbers-only" />

JS:

angular.module('myApp', []).directive('numbersOnly', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
       modelCtrl.$parsers.push(function (inputValue) {
           if (inputValue == undefined) return '' 
           var transformedInput = inputValue.replace(/^[^1-9]*/g, ''); 
           if (transformedInput!=inputValue) {
              modelCtrl.$setViewValue(transformedInput);
              modelCtrl.$render();
           }         

           return transformedInput;         
       });
     }
   };
});

function MyCtrl($scope) {
    $scope.number = ''
}

FIDDLE: FIDDLE

Wiktor Stribiżew · Accepted Answer · 2015-12-21 17:46:49Z

3

Just add an alternative ^0+ to /[^0-9]+/g so that the leading zeros could be removed:

var transformedInput = inputValue.replace(/^0+|[^0-9]+/g, ''); 
//                                         ^^^

See updated fiddle.

The ^0+ matches 1 or more (+) zeros that are at the string start (^).

answered Dec 21, 2015 at 17:46

Wiktor Stribiżew

631k41 gold badges502 silver badges633 bronze badges

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

Comments

Vidya Sagar · Accepted Answer · 2015-12-21 17:08:05Z

0

I have found this working fiddle(not created by me). Hope this helps.

Directive:

fessmodule.directive('format', ['$filter', function ($filter) {
return {
    require: '?ngModel',
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;


        ctrl.$formatters.unshift(function (a) {
            return $filter(attrs.format)(ctrl.$modelValue)
        });


        ctrl.$parsers.unshift(function (viewValue) {
            var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
            elem.val($filter(attrs.format)(plainNumber));
            return plainNumber;
        });
    }
};
}]);

P.S. I have not tested.

answered Dec 21, 2015 at 17:08

Vidya Sagar

1,7173 gold badges17 silver badges30 bronze badges

Comments

Manoj Salvi · Accepted Answer · 2015-12-21 18:09:27Z

0

well you just need to remove the first ^ from your pattern. here is updated fiddle

use this -

replace(/[^1-9]*/g, '');

you can use the below one to restrict 0 at beginning updated fiddle-

replace(/^0|[^0-9]/, '');

edited Dec 21, 2015 at 18:09

answered Dec 21, 2015 at 17:16

Manoj Salvi

2,7991 gold badge19 silver badges21 bronze badges

2 Comments

Manoj Salvi Over a year ago

no its not accepting 0 at all.. I guess this is what you wanted??

Ved Over a year ago

No I just want no leading 0. it should accept 10, but not 01.

Collectives™ on Stack Overflow

Angular Directive for input Numbers only

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related