Question

我有一个小的Angular验证，我希望在输入少于3个字符或超过6个字符时显示错误。

对于我所做的事情，只有当我开始在输入上打字时才会显示错误，例如;如果我加载页面并且肯定在页面加载时输入字符小于3，那么它应该显示错误，但只有当我开始在输入上键入时才显示错误。

我的HTML

<form name="someform">
<input type="text" ng-model="handle"/>
<div ng-if="handle.length<lowcharec" class="alert" style="color: red">sorry, maxlength cannot be  less than 3
</div>
<div ng-if="handle.length>highcharec" class="alert" ng-init="highcharec" style="color: red">sorry, maxlength cannot be greater than 6
</div>
<input type="submit"/>

</form>

我的剧本：

$scope.lowcharec = 3;
$scope.highcharec = 6;

我失去了一些东西，并且很有棱角分明，请指导我做错了什么。

Answer 1

这是因为您的handle变量在页面加载时仍未定义（并且在您开始输入之前一直保持不变），并且undefined < 3的计算结果为false。要解决此问题，请将ng-if更改为ng-if="handle.length<lowcharec || !handle"。

Answer 2

您没有显示完整的代码。所以要弄清楚你的实际问题并不容易。在这里你可以看到一个有效的例子。

var app = angular.module('app', []);

app.controller('FormCtrl', function($scope) {
  $scope.handle = '';
  $scope.lowcharec = 3;
  $scope.highcharec = 6;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <form name="someform" ng-controller="FormCtrl">
    <input type="text" ng-model="handle" />
    <div ng-if="handle.length < lowcharec" class="alert" style="color: red">sorry, maxlength cannot be less than 3
    </div>
    <div ng-if="handle.length > highcharec" class="alert" ng-init="highcharec" style="color: red">sorry, maxlength cannot be greater than 6
    </div>
    <input type="submit" />

  </form>
</body>

ng-if无法处理页面加载

2 个答案: