AngularJs Input textbox allow only greater than zero value

Question

I am trying validate the textbox allow only integer number and greater than zero values.

Here I attached my code.

Html:

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="\d" />

</body>

Js:

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

app.directive('allowPattern', [allowPatternDirective]);

function allowPatternDirective() {
    return {
        restrict: "A",
        compile: function(tElement, tAttrs) {
            return function(scope, element, attrs) {
                element.bind("keypress", function(event) {
                    var keyCode = event.which || event.keyCode; // I safely get the 
                    if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
            event.preventDefault();
                        return false;
                    }          
                });
            };
        }
    };
}

Also I tried like this bellow:

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />

</body>

But its not working.

Check jsfiddle link: click here

@Gianmarco - input type="number" is not suitable for my case, because the textbox text or number option based on another dropdown select option. Its possible to do in my example? — RSKMR
– RSKMR, Commented Mar 31, 2016 at 9:27
@AvinashRaj - ng-pattern is validate after form submit, I expect allow only greater than 0 values. — RSKMR
– RSKMR, Commented Mar 31, 2016 at 9:28

Community · Accepted Answer · 2017-05-23 12:17:05Z

You can make use of angular form validation and also use ng-model-options

Here is the link to Codepen

Controller snippet :

var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
 $scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})

View :

<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
  <form name="myForm1">
  <div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
    <label for="">Following validation happens as the user entrs a value.</label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
  </div>
</form>
<form name="myForm2">
  <div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
    <label for="">Following validation happens after blur </label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
  </div>
</form>

For more on how you can better this process through controllers refer this link

Collectives™ on Stack Overflow

AngularJs Input textbox allow only greater than zero value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related