Question

考虑以下形式：

<form class="form" name="myForm" ng-submit="submit()">
    <div class="form-group" ng-class="{'has-error': myForm.title.$invalid}">
      <label for="title">Title: </label>
      <input id="title" name="title" class="form-control" ng-model="title"
             required>

      <div ng-messages="myForm.title.$dirty && myForm.title.$error" role="alert">
        <div ng-message="required" class="alert small with-error-font">
          <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
          Title is required!
        </div>
      </div>
    </div>
</form>

我想达到以下行为：

如果用户开始输入并且将该字段留空（它不再是原始状态），则应出现验证错误消息。否则，在用户点击提交之前，它不应该是可见的。

所以我认为可以通过使用'aspect'/'interceptor'来完成，它只是检查表单是否有效。如果是，那么它应该调用ng-submit函数。如果没有，那么它应该在每个字段上调用$ setDirty（以便出现验证错误）并简单地返回。

我想通过创建ma自己的指令来实现它，如下所示：

let validateAndSubmit = function (onValidationSuccessCallback) {
  return function () {
    // this is where validation logic should happen
    onValidationSuccessCallback();
  };
};

let ValidatingFormDirective = function () {

  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      name: '@',
      postValidationCallback: '&'
    },
    link: function (scope) {
      scope.validateAndSubmit = validateAndSubmit(scope.postValidationCallback);
    },
    templateUrl: 'app/events/common/forms/validating-form.template.html'
  }
};

export default ValidatingFormDirective;

这是我的指令模板：

<form name="{{name}}" novalidate ng-submit="validateAndSubmit()" ng-transclude></form>

问题：

现在，如果我在html中将form更改为validation-form，则似乎根本无法识别myForm，因为无论是ngMessages还是ng-class都不会出现。

我该如何解决？或者我应该尝试完全不同的方法？

AngularJS - 表单包装器指令，用于验证目的

0 个答案: