角表單驗證 - 現場更新

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的消息顯示近輸入字段的錯誤消息我。這是我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; 
     }); 
    } 
    }; 
); 

一切工作正常，但我想現在要做的就是爲h如果在顯示錯誤後字段被修改（直到提交按鈕再次被按下），則會出現錯誤。

我想到的第一個想法是在錯誤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> 

我增添了新的指令更新我的領域和更新的錯誤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; 
     }); 
    ); 
    } 
    }; 
}); 

而且s的小更新ubmitForm功能，現在設置isDirty標誌我的領域（S）爲false：

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