角度表單驗證：當至少一個輸入為ng-invalid和ng-dirty時顯示ng-ng

Question

我在Angular partial中有以下表格：

<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
    <input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
    <input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
    <input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
    <input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
    <span ng-show="submit_entry_form.$invalid">Error!</span>
    <input type="submit" id="submit" value="Submit" />
</form>

我遇到的麻煩是底部的跨度是“錯誤！”。 我希望這只顯示其中一個輸入是“ng-dirty”和“ng-invalid”。 如上所述，錯誤將顯示，直到表單完全有效。 長期的解決方案是做類似的事情：

<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>

哪個是UGLY。 有更好的方法嗎？

Answer 1

方法1：在控制器設置的$ scope上使用函數。

因此，為了更好地理解您的問題，您希望在表單上的任何字段同時為$ invalid和$ dirty時顯示一條消息...

添加控制器方法：

app.controller('MainCtrl', function($scope) {

  $scope.anyDirtyAndInvalid = function (form){
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
         if(form[prop].$dirty && form[prop].$invalid) {
           return true;
         }
      }
    }
    return false;
  };
});

並在您的HTML中：

<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>

這是一個演示它的plunker

現在，所有的這么說，如果有人在你的表單中輸入的數據，這是不完全的，形式本身是無效的。 所以我不確定這是最好的可用性。 但它應該工作。

---

方法2：使用過濾器！ （推薦的）

我現在推薦一種過濾器用於此類事情......

以下過濾器與上面的過濾器相同，但對於Angular，IMO來說，這是更好的做法。 也是一個插件。

app.filter('anyInvalidDirtyFields', function () {
  return function(form) {
    for(var prop in form) {
      if(form.hasOwnProperty(prop)) {
        if(form[prop].$invalid && form[prop].$dirty) {
          return true; 
        }
      }
    }
    return false;
  };
});

<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>