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指令只接受輸入數字在給定的範圍內

回答

相關問題