Question

我有以下指令，当a）字段的值发生变化时，或者b）字段的元素已经模糊时，它将检查字段的有效性。

首先，这是一个如何使用该指令的例子：

<form name="myForm">
  <input type="text" name="favoriteColor" validate-for="myForm">
</form>

我必须指定myForm的原因是因为我有时会嵌套表单。所以在这种情况下它会是这样的：

<form name="myForm">
  <input type="text" name="favoriteColor" validate-for="myForm">
  <ng-form name="innerForm">
    <input type="text" name="favoriteNumber" validate-for="innerForm">
  </ng-form>
</form>

无论如何，这就是我的代码（ES6）：

'use strict';

class ValidateFor {
  constructor() {
    this.restrict = 'A';
    this.require = 'ngModel';

    this.link = ($scope, $element, $attrs, ngModel) => {
      var form = $scope[$attrs.validateFor];
      var field = form[$element.attr('name')];

      $scope.$watch(() => ngModel.$modelValue, () => {
        if (field.$touched) {
          this.checkForErrors(field, $element);
        }
      });

      $element.bind('blur', () => {
        this.checkForErrors(field, $element);
      });
    };
  }

  checkForErrors(field, $element) {
    if (field.$invalid) {
      $element.addClass('error');
    } else {
      $element.removeClass('error');
    }
  }
}

ValidateFor.$inject = [];

export default ValidateFor;

我的指令不做的一件事是在提交表单时将error类添加到字段中。

如何在表单提交时向我的所有字段添加错误类？

我不关心解决方案是否意味着修改我的指令或在其他地方添加代码。

Answer 1

这是我接近这种功能的方式：

我已经做了一个指令，在表单的提交按钮上使用它。它的关键功能是在用户想要提交表单时在所有字段上设置$dirty状态 - 从而使我能够显示通常隐藏的所有错误。然后，如果表单有效，它将运行回调函数。

.directive('mySubmitIfValid', function () {
    return {
        restrict: 'A',
        scope: {
            form: '=myForm',
            submit: '&mySubmitIfValid'
        },
        link: function (scope, element) {

            element.on('click', function () {
                markFieldsAsDirty();
                submitFormIfValid();
            });

            function markFieldsAsDirty() {
                Object.keys(scope.form).filter(function (key) {
                    return key[0] !== '$';
                }).forEach(function (fieldName) {
                    scope.form[fieldName].$setDirty();
                });
            }

            function submitFormIfValid() {
                if (scope.form.$valid) {
                    scope.submit();
                }
            }

        }
    };
});

然后在html：

<form name="myForm">
  <input type="text" name="favoriteColor" ng-minlength="2">
  <input type="submit" value="Save"
   my-submit-if-valid="submitFunction()" my-form="myForm">
</form>

Answer 2

在提交表单时，我最终只是$broadcast form-submitted个事件。似乎工作正常。这是我的代码。

'use strict';

class ValidateFor {
  constructor() {
    this.restrict = 'A';
    this.require = 'ngModel';

    this.link = ($scope, $element, $attrs, ngModel) => {
      var form = $scope[$attrs.validateFor];
      var field = form[$element.attr('name')];

      $scope.$on('form-submitted', () => {
        this.checkForErrors(field, $element);
      });

      $scope.$watch(() => ngModel.$modelValue, () => {
        if (field.$touched) {
          this.checkForErrors(field, $element);
        }
      });

      $element.bind('blur', () => {
        this.checkForErrors(field, $element);
      });
    };
  }

  checkForErrors(field, $element) {
    if (field.$invalid) {
      $element.addClass('error');
    } else {
      $element.removeClass('error');
    }
  }
}

ValidateFor.$inject = [];

export default ValidateFor;

Angular验证提交时的所有字段

2 个答案: