Question

我们有一个验证指令，用于验证Blur和viewContentLoaded事件的控件。

我们将表单值保留在本地存储中，以便在我们离开表单并返回时记住详细信息

问题在于，即使它记得细节，当我们再次加载该视图时，它也不会重新验证名字和姓氏。

以下是我们的原始代码：

<div>
<form name="form" class="form-horizontal">
    <label class="control-label">First name</label>
    <div class="controls">
        <input id="firstName" name="FirstName" ng-model="order.FirstName" type="text" validate="alphabeticOnly" maxLength="30" required/>
        <span class="help-block" ng-show="form.FirstName.$dirty && form.FirstName.$invalid">Please enter valid Firstname</span>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Last name</label>
    <div class="controls">
        <input id="lastName" name="LastName" ng-model="order.LastName" type="text" validate="alphabeticOnly" maxLength="30" required/>
        <span class="help-block" ng-show="form.LastName.$dirty && form.LastName.$invalid">Please enter valid Lastname</span>
    </div>
  </div>
</form>

确认

下一个功能只保存订单并重定向到另一个页面。

我们在$ scope.order上有一个$ watch，用于保存本地存储中的数据以便记住。

指令：

  .directive('validate', ['validationService', function(validationService) {

function validate(elm) {
  var fn = elm.attr("validate");
  var value = elm.val();
  return validationService[fn](value);
}

return {
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, elm, attrs, ctrl) {

      function triggerValidations(){
          checkValidity();
          ctrl.$parsers.unshift(function(viewValue) {
              checkValidity();
              return viewValue;
          });
          ctrl.$formatters.unshift(function(viewValue) {
              checkValidity();
              return viewValue;
          });
      }

      function checkValidity(){
          if (elm.val().length > 0)
          {
              var isValid = validate(elm);
              ctrl.$setValidity('validate', isValid);
              console.log(" here i am - CheckValidity", attrs.id, elm.val(),  isValid );
              //scope.$apply();
          }
      }

  $rootScope.$on('$viewContentLoaded', triggerValidations);

    elm.bind('blur', function(event) {
      scope.$apply(function() {
        ctrl.$setValidity('validate', validate(elm));
      });
    });

  }
};

}]）

如果我们添加$ scope.apply，则会出现错误“$ digest has progress”

最后，我们想要在有人登陆页面时验证表格。

AngularJS验证指令

0 个答案: