Allows the user to enter only positive numbers in the input field using angle characters

Question

Allows the user to enter only positive numbers in the input field using angle characters

I want to allow the user to enter only positive numbers in the text box

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:

<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 is this not working? Can anyone run it and check please!

+4

javascript angularjs

Clyde dias Jan 6 '16 at 9:59

source share

2 answers

number, min, .

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

+13

Majid Yaghouti 06 . '16 10:05

Minato · Accepted Answer · 2016-01-06T10:53:56+0000

There are a lot of problems in your code.

you have a nested ng-appone that is not allowed in normal mode, use one ng-appwith several ng-controller.
restrict directive, ( A = , E = , C = ), restrict: "A"
controller controller function, - services factories,
@MajidYaghouti ng-change, , .
, .

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();
                    }
                });
            }
        };
    });

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>

plunkr

Allows the user to enter only positive numbers in the input field using angle characters

More articles: