Question

我有一个目前有一个字段的表单，它几乎没有验证规则：

<form name="my_form" novalidate ng-controller="FormController">
    <label>Your Name:</label>
    <input type="text"
           name="name"
           placeholder="Your Name"
           ng-model="form.name"
           ng-minlength="3"
           ng-maxlength="20"
           unique
           required />
    <button ng-click="submitForm()">Submit</button>
    <div class="error"
           ng-show="my_form.isSubmitted"
           ng-messages="my_form.name.$error">
        <div ng-messages-include="errors.html"></div>
    </div>
</form>

我的字段经过验证：

最小。长度;
最大。长度;
并且必须是唯一的（自定义验证规则）

我使用 ng-messages 在输入字段附近显示错误消息。这是我的 errors.html 模板：

<div ng-message="required">This field is required.</div>
<div ng-message="minlength">This field is too short.</div>
<div ng-message="maxlength">This field is too long.</div>
<div ng-message="unique">The value of this field must be unique.</div>

只有在“提交”之后才能开始验证。按下按钮（ submitForm（）函数将 my_form.isSubmitted 标志设置为true并显示我的错误div）

这是我的js代码：

var app = angular.module('formValidation', ['ngMessages']);

app.controller('FormController', function($scope) {
  $scope.submitForm = function() {
    $scope.my_form.isSubmitted = true;
  };
});

app.directive('unique', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {
      var names = ['Dmitry', 'Alexander', 'Elizabeth'];
      ctrl.$parsers.push(function(value) {
        if (names.indexOf(value) > -1) {
          ctrl.$setValidity('unique', false);
          return false;
        }
        ctrl.$setValidity('unique', true);
        return true;
      });
    }
  };
);

一切正常，但我现在要做的是在显示错误后修改字段时隐藏错误（直到再次按下提交按钮）。

我想到的第一个想法是在错误div的ng-show指令中添加另一个条件，以检查相应的字段是否更新，如果是，则不应显示错误。类似的东西：

<div class="error"
       ng-show="!my_form.name.isUpdated && my_form.isSubmitted"
       ng-messages="my_form.name.$error">
    <div ng-messages-include="errors.html"></div>
</div>

因此，在按钮单击时，我可以将所有表单字段的 isUpdated 标志设置为false，并且在输入更新时可以将其设置为true。但这个解决方案在我看来远非优雅。我确信有更好的方法来实现这种行为。有什么想法吗？

Answer 1

我目前的解决方案（可能不是最好的解决方案）：

<input type="text"
           name="name"
           placeholder="Your Name"
           ng-model="form.name"
           ng-minlength="3"
           ng-maxlength="20"
           unique
           updatable
           required />
    <button ng-click="submitForm()">Submit</button>
    <div class="error"
           ng-show="!my_form.name.isDirty && my_form.isSubmitted"
           ng-messages="my_form.name.$error">
        <div ng-messages-include="errors.html"></div>
    </div>

我在我的字段中添加了新指令 updatable 并更新了错误div的显示条件：

ng-show="!my_form.name.isDirty && my_form.isSubmitted"

指令：

app.directive('updatable', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {
      ele.bind('input', function() {
        scope.$apply(function() {
          ctrl.isDirty = true;
        });
      );
    }
  };
});

还有一个submitForm函数的小更新，现在将我的字段的 isDirty 标志设置为false：

$scope.submitForm = function() {
    $scope.my_form.isSubmitted = true;
    $scope.my_form.name.isDirty = false;
};

角度表单验证 - 隐藏字段更新

1 个答案: