CODEWITHSUNDEEP
javascriptangularjs
user3441151
user3441151

Reputation: 1910

AngularJS issue with allows only numbers to be typed into a textbox

I want user to allows only numbers to be typed into a textbox. For this I am using below code :

.directive('digitOnly', [function () {
    return {
        require: 'ngModel',
        scope: {
            digitOnly: '=?'
        },
        link: function (scope, element, attrs, modelCtrl) {
            if (scope.digitOnly || scope.digitOnly == undefined) {
                modelCtrl.$parsers.push(function (inputValue) {
                    if (inputValue == undefined) return '';
                    if (attrs.digitOnly == "false") {
                        return inputValue;
                    } else {
                        var transformedInput = inputValue.replace(/[^0-9]/g, '');
                        if (transformedInput != inputValue) {
                            modelCtrl.$setViewValue(transformedInput);
                            modelCtrl.$render();
                        }
                        return transformedInput;
                    }
                });
            }
        }
    };
}])

My input textbox code is given below :

<input type="text" name="sidNo" class="form-input" placeholder="Enter 5-6 digits"
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required digit-only
ng-pattern="/^[0-9]*$/">

It is working fine when I type anything. It restrict me to type except numbers.

But the problem is that when my ng-model value profInfo.sidNo comes from backend like AASS001 that is showing me on textbox as invalid input error message that is correct but when I remove this value from backspace button it remove all value on single key press of backspace and input two Zeros like 00

So please help me to fix this.

I am using AngularJS.

Upvotes: 0

Views: 206

Answers (3)

amansinghgusain
amansinghgusain

Reputation: 774

First of all, @giovani-vercauteren is right, if you allow invalid characters, then is no point of using angular directive.
But the below hack can fulfill your requirement. I hope

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

thisApp.controller('MyCtrl',['$scope', function($scope) {
    $scope.btnClick= function(){
    $scope.sidNo='7AASS001';
    }
}]
);

thisApp.directive('digitOnly', [function () {
    return {
        require: 'ngModel',
        scope: {
            digitOnly: '=?'
        },
        link: function (scope, element, attrs, modelCtrl) {
        scope.isBackspacePressed=false;
        element.bind('keydown', function (e, inputs) {

            var code = e.keyCode || e.which;
            var val = element[0].value;

            var current = document.activeElement;
         //Enter all Charcodes u want where u want to prevent keypress
            if (code === 8 || code === 46) {
            scope.isBackspacePressed=true;
                }
        })
            if (scope.digitOnly || scope.digitOnly == undefined) {

                modelCtrl.$parsers.push(function (inputValue) {
                console.log(scope.isBackspacePressed)
                if(scope.isBackspacePressed)  {scope.isBackspacePressed=false; return inputValue;}
                    if (inputValue == undefined) return '';
                    if (attrs.digitOnly == "false") {
                        return inputValue;
                    } else {
                        var transformedInput = inputValue.replace(/[^0-9]/g, '');
                        if (transformedInput != inputValue) {
                            modelCtrl.$setViewValue(transformedInput);
                            modelCtrl.$render();
                        }
                        return transformedInput;
                    }
                });
            }
        }
    };
}])

JSFiddle

Upvotes: 0

rrd
rrd

Reputation: 5977

The best way is to use the number like @mpdev7 said, but to use ng-pattern in conjunction with it to prevent invalid characters:

<input type="number" ... etc />

Then you'd create a constant for your Regex like this one for example:

.constant('allowedSpecialCharactersRegex',
  /^[ a-zA-Z0-9!\"#\$£\%\&'\(\)\*\+\,\-\.\/\:\;\<\=\>\?@\[\\\]\^_\`\{\|\}~]*$/)

Then alter your template accordingly (note 'vm' assuming you have your Angular set up like that):

<input type="number" ... ng-pattern="vm.allowedSpecialCharactersRegex" />

Alter the pattern obviously, to remove chars you don't want.

Upvotes: 1

mpdev7
mpdev7

Reputation: 33

The best way for typing only number in input it's use the input type="number", it is not what you are looking for?

input like this

<input type="number" name="sidNo" class="form-input" placeholder="Enter 5-6 digits"
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required">

Upvotes: 0

Related Questions