angularjs指令只接受输入数字在给定的范围内

嗨我正在开发Web应用程序在angularjs。我有要求验证文本框。它应该只接受最多10位数的数字。我有指令，但目前的指令不应该限制输入数字的数量。angularjs指令只接受输入数字在给定的范围内

myapp.directive('validNumber', function() { 
    return { 
     require: '?ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      if (!ngModelCtrl) { 
       return; 
      } 
      ngModelCtrl.$parsers.push(function (val) { 
       if (angular.isUndefined(val)) { 
        var 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(); 
       } 
      }); 
     } 
    }; 
}); 
     <div class="inputblock" ng-class="{ 'has-error' : ((form1.$submitted && form1.idnumber.$invalid)|| (form1.idnumber.$invalid && form1.idnumber.$dirty))}"> 
           <label class="inputblock-label" ng-show="idnumber">{{ 'ID Number' | translate }}</label> 
           <span class="ang-error" style="color:#fff" ng-show="form1.idnumber.$dirty && form1.idnumber.$invalid "> 
            <span ng-show="form1.idnumber.$invalid && form1.idnumber.$dirty">*{{'Max allowed digits 10' | translate}}</span> 
           </span> 

           <input class="with-icon" type="text" name="idnumber" placeholder="{{ 'ID Number' | translate }}" ng-model="idnumber" required ng-pattern="/^[0-9]{1,7}$/" > <!--valid-number--> 
          </div>

我可以知道在上面的指令中应该改变什么，以便它最多只能接受10位数！任何帮助，将不胜感激。谢谢。

来源

2017-08-03 Niranjan Godbole

为什么不使用NG-最大长度=“10”？ – Vivz

嗨Vivz，我可以使用但我的文本框不应该接受文本。 –

使用输入类型=“数字”和最大长度=“10”。不需要指令 – OnDoubt

使用以下代码并尝试。我此代码的原始目的是将的数字限制为整数。不过，我已经修改了一点，所以你可以使用这个

(function() { 
'use strict'; 

angular.module('app').directive('intValidate', intValidate); 

function intValidate($locale) { 

    var decimalSep = $locale.NUMBER_FORMATS.DECIMAL_SEP; 
    var toNumberRegex = new RegExp('[^0-9\\' + decimalSep + ']', 'g'); 



    function toNumber(currencyStr) { 
     return parseFloat(currencyStr.toString().replace(toNumberRegex, ''), 10); 
    } 

    return { 
     restrict : 'A', 
     require : 'ngModel', 
     link : function validate(scope, elem, attrs, modelCtrl) { 

      modelCtrl.$parsers.push(function(newViewValue) { 
       var modelValue = toNumber(newViewValue); 

       var valid = modelValue <= 9999999999; 

       modelCtrl.$setValidity('limitcheck', valid); 

       return valid ? newViewValue : undefined; 
      }); 
     } 
    }; 
} 

})();

和使用，

<input type="text" id="value" name="value" int-validate>

，如果你想的错误消息

<p class="help-block" ng-if="cacc.form.value.$error.limitcheck">Max 10 digits allowed</p>

来源

2017-08-03 06:05:56 Ravindu

谢谢你的工作正常。是否可以限制上述指令中的字母？ –

* {{'Max allowed digits 10'|翻译}} –

我正在使用上面的代码来显示错误消息。如果用户输入字母，我想显示奥利数字是允许的。是否有可能做到这一点？ –

angularjs指令只接受输入数字在给定的范围内

回答

相关问题