角度表單驗證-在字段更新時隱藏錯誤

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>

僅在按下“ Submit”按鈕后才應開始驗證（ 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;
      });
    }
  };
);

一切正常，但是我現在想做的是隱藏錯誤，如果在顯示錯誤后修改了該字段（直到再次按下提交按鈕）。

我想到的第一個主意是在error 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，而在輸入update時，可以將其設置為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>

我向字段添加了可更新的新指令，並更新了錯誤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;
};