Question

我有一个包含最小长度检查的angularjs代码段。最小长度为2。当我输入2、3、4,5至9之类的数字时，它会抱怨ng-length。但是当输入10或11时，它不会抱怨ng-length。这是带有ng-length检查的输入

<label>Items</label>
              <input ng-minlength="2" ng-model="items" name="dInto" 
               type="number" class="ng-dirty ng-valid ng-touched">

              <span style="color:red" ng-show="myForm.dInto.$error.type">Please enter a number</span>
              <span style="color:red" ng-show="myForm.dInto.$error.minlength">Must be 2 or more</span>

请为什么我从10开始就拥有ng-length的经验，而我编码为2

Answer 1

由于ng-minlength用于限制最小字符，因此您的字符数应至少为两位数。

ng-minlength指令向输入字段和表单的验证器添加了限制。

如果值的长度小于指定的长度，则ng-minlength指令将在输入字段中添加“无效”状态。

<!DOCTYPE html>
        <html>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <body ng-app="">

        <form name="myForm">

        <p>An error will be displayed when you type anything less than 2 characters in the input field:</p>

        <input name="myInput" type="number" ng-model="myInput"  required>
    <span style="color:red" ng-show="myInput < 2">Must be 2 or more</span>

        </form>


        </body>
        </html>

Answer 2

这是工作代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
 
 <form name="myForm">
    <label>Items</label>
              <input ng-model="items" name="dInto" type="number" class="ng-dirty ng-valid ng-touched">

              <span style="color:red" ng-show="myForm.dInto.$error.type">Please enter a number</span>
              <span style="color:red" ng-show="myForm.dInto.$error.minlength">Must be 2 or more</span>
              </form>

</div>

</body>
</html>

我认为您正在寻找这个：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 
 <form name="myForm">
    <label>Items</label>
    <input ng-model="items" name="dInto" 
               type="number" ng-keyup="validate(items)" class="ng-dirty ng-valid ng-touched">

    <span style="color:red" ng-show="myForm.dInto.$error.type">Please enter a number</span>
    <span style="color:red" ng-show="isValid">Must be 2 or more</span>
 </form>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.isValid = false;
    
    $scope.validate = function(value){
      if(value && value<=1){
         $scope.isValid = true;
      }else{
         $scope.isValid = false;
      }
    }
});
</script>


</body>
</html>

Answer 3

这是工作代码。

   <label>Items</label>
              <input ng-model="items" name="dInto" 
               type="number" class="ng-dirty ng-valid ng-touched">

              <span style="color:red" ng-show="myForm.dInto.$error.type">Please enter a number</span>
              <span style="color:red" ng-show="items < 3">Must be 2 or more</span>

ng-minlength of 2在angularjs中不起作用

3 个答案: