Allowing user to type only positive numbers in input box using angularjs

Question

I want to allow the user to enter only positive numbers in the textbox

My code is as follows:

script.js file contents:

angular.module("myfapp", []).controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});

angular.module('myApp', []).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) {
    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();
    }
  });
}
};
});
});

angular.html contents as follows:

<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>

<style>
.entry {
width: 300px;
margin: 10px auto;
text-align: center;
}
</style>

</head>
<body ng-app="myfapp">
<div ng-controller="HelloController" >
<h2 class="entry">Welcome {{ helloTo.title }} to the world of        Tutorialspoint!</h2>
</div>

<section ng-app="myApp" ng-controller="MainCtrl">
 <h4 class="entry">AngularJS Numeric Value Widget</h4>
<div class="well entry">
<label>Employee Age
  <input type="text" ng-model="employee.age"  placeholder="Enter an age"    valid-number/>
   </label>
</div>
</section>

</body>

</html>

Why does it not work? Can anyone run it and check please!

suggestion: change your module name from myfapp to MyFirstApp sounds nicer.. :P — Minato
– Minato, Commented Jan 6, 2016 at 10:03

Majid Yaghouti · Accepted Answer · 2016-01-06 10:05:01Z

19

Change your input type to number, then you can use min directive to specify the minimum number allowed.

<input type="number" ng-model="employee.age" placeholder="Enter an age" min="0"/>

answered Jan 6, 2016 at 10:05

Majid Yaghouti

92314 silver badges26 bronze badges

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

4 Comments

Clyde Dias Over a year ago

i want to do it using angularjs

Majid Yaghouti Over a year ago

If you mean you want to do it in controller or directive, use ng-change = "checkFunction()", so you can check the entered number in your controller.

SpaceNinja Over a year ago

I love these one-line solutions. Nothing against the 20+ lines of code solutions, but if it can be done in one, let's try it!

Majid Yaghouti Over a year ago

@Prashant Prabhakar Singh Are you using angularjs?

Minato · Accepted Answer · 2016-01-07 06:39:38Z

There are a lot of problems with your code.

you've nested ng-app which is not allowed normally, use a single ng-app with multiple ng-controller.
your need to use restrict inside your directive to restrict its usage to one or multiple types (i.e. A=Attribute,E=Element,C=Class), like in this case restrict: "A"
When specifying a controller its generally a good practice to use array with the last element being the controller function and the first ones being all the services factories you are using in string format
@MajidYaghouti's suggestion is good to use ng-change but if you insist on using directives I have done some bit of corrections to your code.
Use some code formatting dude, and name your stuff cautiously and elegantly.

your script.js

angular.module("myfapp", []).controller("HelloController", ["$scope", function($scope) {
        $scope.helloTo = {};
        $scope.helloTo.title = "AngularJS";
    }])
    .controller('MainCtrl', ["$scope", function($scope) {

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

                ngModelCtrl.$parsers.push(function(val) {
                   if (val === null)
                    return;
                   var myRegex = /\d+\.(\d{1,2})?/;
                   var clean = myRegex.exec(val)[0];
                   if (val != clean) {
                       ngModelCtrl.$setViewValue(clean);
                       ngModelCtrl.$render();
                   }
                   return clean;
                });

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

and your index.html

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
      <script src="script.js"></script>
      <style>
         .entry {
         width: 300px;
         margin: 10px auto;
         text-align: center;
         }
      </style>
   </head>
   <body ng-app="myfapp">
      <div  ng-controller="HelloController" >
         <h2 class="entry">Welcome {{ helloTo.title }} to the world of        Tutorialspoint!</h2>
      </div>
      <section ng-controller="MainCtrl">
         <h4 class="entry">AngularJS Numeric Value Widget</h4>
         <div class="well entry">
            <label>Employee Age
            <input type="text" ng-model="employee.age"  placeholder="Enter an age"  valid-number/>
            </label>
            <div>
               {{ employee.age }}
            </div>
         </div>
      </section>
   </body>
</html>

updated plunkr

thanks a lot...the code works perfectly. now what if i wanted to enter only positive numbers and decimal numbers with just two numbers after the decimal
now what if i wanted to enter only positive numbers and decimal numbers with just two numbers after the decimal
ng-app is nestable. if i have multiple apps, they should all be able to run.

Collectives™ on Stack Overflow

Allowing user to type only positive numbers in input box using angularjs

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related