how to allow only numbers in textbox in angularjs?

Question

Hi am newbie to angular js? How to allow numbers only in texbox once user enter decimal value or string showing error in angular js?

 <div class="col-md-6 col-sm-6"> 
                                                        <label class="col-md-5 col-sm-5 pad-top5 pad-lft-no">Min <span class="error">*</span></label>
                                                        <input positive  type="number" class="col-md-7 col-sm-7 cls_input_inherit numberinput" min="0" ng-maxlength="3" id="age_min" name="age_min" ng-model="attributes.age_min"  required/>
                                                        <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.required" class="error">{{formValidation.required}}</label>                                                           
                                                        <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive &&  attributesForm2.age_min.$error.maxlength" class="error"> {{formValidation.monthMaxChar}} </label>
                                                        <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.min" class="error">{{formValidation.minMax}}</label>
                                                        <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.number" class="error">{{formValidation.errorNumber}}</label>
                                                        <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.positive" class="error">{{formValidation.minpositive}}</label>
                                                    </div>

Am try above code but it's not showing error when enter decimal value?How to solve it?

Find answer: http://stackoverflow.com/questions/32777184/html-input-for-positive-whole-numbers-only-type-number — Varit J Patel, Jul 02 '16 at 12:30
Try using input type as `number` and `pattern="^[0-9]*$"` attribute — Safeer Hussain, Jul 02 '16 at 12:31
Possible duplicate http://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers — Safeer Hussain, Jul 02 '16 at 12:34
not working, am add pattern but not showing any error when add decimal value?how to show error message for pattern validate?change pattern too ^[0-9]*$ not showing any error still accept decimal value — geetha janar, Jul 02 '16 at 12:42

score 1 · Accepted Answer · answered Jul 02 '16 at 12:45

you need to add ng-pattern="/^(\d)+$/" in input field.

 <div class="col-md-6 col-sm-6"> 
 <label class="col-md-5 col-sm-5 pad-top5 pad-lft-no">Min <span class="error">*</span></label>
                                                    <input positive  type="number" class="col-md-7 col-sm-7 cls_input_inherit numberinput" min="0" ng-maxlength="3" id="age_min" name="age_min" ng-model="attributes.age_min" ng-pattern="/^(\d)+$/" required/>
                                                    <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.required && attributesForm2.age_min.$touched && attributesForm2.age_min.$invalid"  class="error">{{formValidation.required}}</label>                                                           
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive &&  attributesForm2.age_min.$error.maxlength" class="error"> {{formValidation.monthMaxChar}} </label>
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.min" class="error">{{formValidation.minMax}}</label>
                                                    <label for="age_min" ng-show="submittab2 && !attributesForm2.age_min.$error.positive && !attributesForm2.age_min.$error.maxlength && attributesForm2.age_min.$error.number" class="error">{{formValidation.errorNumber}}</label>
                                                    <label for="age_min" ng-show="submittab2 && attributesForm2.age_min.$error.positive" class="error">{{formValidation.minpositive}}</label>
                                                </div>

ya changed like above coding,not showing any error when given decimal value,also tired step="1" — geetha janar, Jul 02 '16 at 12:50
you need to use this inside lable ng-show="submittab2 && attributesForm2.age_min.$error.required && attributesForm2.age_min.$touched && attributesForm2.age_min.$invalid" — zeeshan Qurban, Jul 02 '16 at 12:55

score 0 · Answer 2 · answered May 02 '18 at 04:17

This is just alternative answer, try to use directive

angular.module('myApp', []);

angular.module('myApp').directive('numOnly', numOnly);
  function numOnly(){
       var directive = {
            restrict: 'A',
            scope: {
                ngModel:'=ngModel'
            },
            link:link
        };

        return directive;

        function link(scope, element, attrs) {
            scope.$watch('ngModel', function (newVal, oldVal) {
                var arr = String(newVal).split('');
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] === '-' || arr[0] === '.')) return;
                if (isNaN(newVal)) {
                    scope.ngModel = oldVal;
                }
            });
        }
  }

angular.module('myApp').controller('myController', myController);
  myController.$inject = ['$scope'];
  function myController($scope){
    var vm = this;
    vm.txtNum = ''; // set default value as empty to avoid error in directive
    vm.txtNumTwo = ''; //set default value as empty to avoid error in directive

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="myApp">
   <div ng-controller="myController as ctrl">
      <input type="text" ng-model="ctrl.txtNum" num-only placeholder="Enter number" />
      <input type="text" ng-model="ctrl.txtNumTwo" num-only placeholder="Enter number" />
   </div>
</div>

how to allow only numbers in textbox in angularjs?

2 Answers2