角度表单验证-在字段更新时隐藏错误

Angular form validation - hide errors on field update

本文关键字：更新 隐藏 错误 字段 表单 验证      更新时间：2023-09-26

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

<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消息在输入字段附近显示错误消息。这是我的错误.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;
      });
    }
  };
);

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

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

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

<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;
};
相关文章：