Question

我正在使用angularjs来验证一个简单的表单。我在用户停止输入时显示验证消息。这是自定义指令的一部分，我在服务器上验证输入的文本的唯一性。

我的代码有效，但我想知道是否有办法采用逻辑，看看用户是否仍在键入并在所有输入指令中重复使用它。在用户完成输入时验证用户是否更友好，而在ngNodel为$ dirty时则不是直接验证。

示例：

<input type="text" ng-model="myModel" name="myInput" ng-minlength="8" />
<p ng-show="myFrm.myInput.$error.ngMinlength && !myFrm.myInput.$typing">invalid</p>

那么如何创建$ typing部分或以某种形式或形式存在？

我创建了一个解决方案来检查用户是否仍在输入this fiddle 但它不可重复使用。

Answer 1

您可以创建另一个与ngModel同名的指令，而不是创建另一个仅附加ngModel状态的指令，并添加自定义行为。注意：您不必担心它会覆盖原始ngModel指令，它只会运行原始和自定义指令。

<强> DEMO

<强> JAVASCRIPT

 .directive('ngModel', function($timeout) {
    return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
        var promise;

        ngModel.IS_TYPING_INACTIVE = true;

        elem.on('keydown', function() {

          ngModel.IS_TYPING_INACTIVE = false;

          $timeout.cancel(promise);
          promise = $timeout(function() {
            ngModel.IS_TYPING_INACTIVE = true;
          }, 500);

          scope.$apply();

        });
      }
    }
  });

HTML （示例用法）

      <div class="form-group" ng-class="{
          'has-error': form.email.$invalid && form.$dirty && form.email.IS_TYPING_INACTIVE,
          'has-success': form.email.$valid && form.$dirty && form.email.IS_TYPING_INACTIVE
        }">
        <input type="email" class="form-control" ng-model="email" name="email" ng-minlength="8" placeholder="Email" required>

        <div ng-if="form.email.$invalid && form.$dirty && form.email.IS_TYPING_INACTIVE">
          <span class="help-block" ng-show="form.email.$error.required">This field is required</span>
          <span class="help-block" ng-show="form.email.$error.email">This is not a valid email</span>
          <span class="help-block" ng-show="form.email.$error.minlength">This field must at least have 8 characters</span>
        </div>

        <div ng-if="form.email.$valid && form.$dirty && form.email.IS_TYPING_INACTIVE">
          <span class="help-block">Email is valid</span>
        </div>

      </div>

Angularjs ngModel输入状态指令

1 个答案: