如何在angularjs的文本框中只允许数字？

Question

嗨，我是 Angular js 的新手吗？ 一旦用户在angular js中输入十进制值或显示错误的字符串，如何只允许在texbox中使用数字？

 <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>

我尝试上面的代码，但是输入十进制值时没有显示错误？如何解决？

Answer 1

您需要在输入字段中添加 ng-pattern="/^(\d)+$/"。

 <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>

Answer 2

这只是替代答案，请尝试使用指令

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>