Javascript 角度形式验证-隐藏字段更新时的错误

我有一个表单，当前只有一个字段，但没有多少验证规则：

<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>

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

我想到的第一个想法是在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。但在我看来，这一解决方案远远不够优雅。我相信有更好的方法来实现这种行为。有什么想法吗？

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

该指令：

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函数的一个小更新，该函数现在将my字段的isDirty标志设置为false：

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

---

可能是输入上的

ng change

指令让表单知道其中一个值已更改？表单不应该知道字段的值何时更改。但是当某个字段的值被更改时，我只需要隐藏与此字段error div相对应的内容。当单击submit按钮时，错误（如果存在）应该再次出现。

<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>

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;
        });
      );
    }
  };
});

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