Angular 1: input field should allow only numbers

Question

Input field should allow only numbers from 0-9, if not number the value entered should not even display in the field. I have tried achieving this using directive which uses $parsers

 app.directive('onlyNumber', function() {
return {
  require: 'ngModel',
  restrict: 'A',
  link: function(scope, element, attrs, modelCtrl) {
    modelCtrl.$parsers.push(function(inputValue) {
      if (inputValue == null)
        return ''
      cleanInputValue = inputValue.replace(/[^\w\s]/gi, '');
      if (cleanInputValue != inputValue) {
        modelCtrl.$setViewValue(cleanInputValue);
        modelCtrl.$render();
      }
      return cleanInputValue;
    });
  }
}

});

This allows characters, and restricts only special characters, I want restric anything other than number.

Answer 1

you can try the below code to restrict it to only numeric characters.

    app.directive('onlyNumber', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attr, modelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9-]/g, '');
                    if (transformedInput !== text) {
                        modelCtrl.$setViewValue(transformedInput);
                        modelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }
            modelCtrl.$parsers.push(fromUser);
        }
    };
});

Answer 2

Regex: ^\b[0-9]+\b or ^[0-9]+$ or ^\d+$

var input1 = '8547'
var input2 = 'fasd55dasd 884'

console.log(/^\b[0-9]+\b/.test(input1), /^[0-9]+$/.test(input2));

Answer 3

You can replace your regex so it allows only numbers. Instead of /[^\w\s]/gi try /\D/gi

For more details you can read about regexs here

Answer 4

You should

1. Define DigitRegExp=/^\d+$/ in the scope
2. add attribute ng-pattern=“DigitRegExp”