有没有办法可以延迟使用AngularJS进行表单字段错误检查?

时间:2014-11-28 10:39:17

标签: angularjs

我的登录屏幕上有这样的HTML:

        <span class="label">
            User Name
            <i class="fa"
               ng-class="{'fa-exclamation-triangle': as.vloginUserName(as.forms.login.loginUserName) != 'OK'}"
               title="{{ as.vloginUserName(as.forms.login.loginUserName) }}"></i>
        </span>
        <input class="w15r"
               id="loginUserName"
               name="loginUserName"
               ng-change="as.clearRegisterData()"
               ng-model="as.loginUserName"
               ng-minlength="3"
               type="text"
               value="" />

我正在使用此功能检查最小长度:

vloginUserName = function (field) {
    if (angular.isDefined(field)) {
        if (field.$error.minlength) return "Minimum Length 5";
    }
    return "OK";
}

有没有办法让我可以延迟显示错误信息,其中包含&#34;最小长度5&#34; ?

1 个答案:

答案 0 :(得分:1)

使用 ngModelOptions ,您可以指定一个自定义事件列表,这些事件将触发模型更新和/或去抖动延迟,以便实际更新仅在计时器发生时进行到期;在另一次更改发生后,此计时器将被重置。

<强>的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example35-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="debounceExample">
  <div ng-controller="ExampleController">
  <form>
    Name:
    <input type="text" ng-model="user.name" ng-model-options="{ debounce: 5000 }" /><br />
  </form>
  <pre>username = "{{user.name}}"</pre>
</div>
</body>
</html>

<强>的script.js

(function(angular) {
  'use strict';
angular.module('debounceExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.user = {};
  }]);
})(window.angular);

可能是这个plnkr会帮助呃..试试这个......在这里,模型字段将在5秒延迟后更新,之后会发生错误检查......