指定された範囲内の入力を受け入れるためのangularjs指令

Question

こんにちは、私はangularjsでWebアプリケーションを開発しています。私はテキストボックスを検証する必要があります。最大10桁の数字のみを受け入れる必要があります。私はディレクティブを持っていますが、現在のディレクティブはタイプされたディジットの数を制限するべきではありません。

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桁まで受け入れることができます。どんな助けもありがとう。ありがとうございました。

Answer 1

次のコードを使用して試してください。このコードの私の本来の目的は、に数値を制限することです。です。しかし、私はあなたがこの

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