AngularJS中的表單驗證總結，每個字段都有自定義消息

Question

我想在使用AngularJS的頁面上呈現驗證摘要。這是我到目前爲止：

<div ng-app> 
    <div ng-controller="ctrl"> 
     <form name="userForm"> 
      <fieldset> 
       <legend>User Info</legend> 
       <p><label>Name: <input type="text" required ng-maxlength="15" name="name" ng-model="name" /></label></p> 
       <p><label>Age: <input type="number" required name="age" ng-model="age" /></label></p> 
       <p><label>Favorite Color: <input type="text" required name="favColor" ng-model="favColor" /></label></p> 
       <p><input type="button" value="Submit" ng-click="submitForm()" /></p> 
      </fieldset> 
     </form> 
     <div id="validationSummary" ng-show="hasValidationErrors()"> 
      <ul> 
       <li ng-repeat="error in validationErrors">{{ error }}</li> 
      </ul> 
     </div> 
    </div> 
</div> 

在我的控制器中，我創建了一個包含所有錯誤的數組。

function ctrl($scope) { 

    $scope.hasValidationErrors = function() { 
     return $scope.validationErrors && $scope.validationErrors.length > 0; 
    }; 

    $scope.submitForm = function() { 
     $scope.validationErrors = []; 

     for (var property in $scope.userForm) { 
      if ($scope.userForm.hasOwnProperty(property) && $scope.userForm[property].$invalid) { 
       $scope.validationErrors.push($scope.userForm[property].$name); 
      } 
     } 
    } 
} 

我弄不清楚的是：我怎麼能得到更多的只是每個領域的名稱是無效的？我注意到每個字段上還有一個$error屬性。輸出這個不是$name給了我下面的：

{"required":true,"maxlength":false} 
{"required":true,"number":false} 
{"required":true} 

這樣我就可以得到字段名，我可以描述什麼是錯與特定領域的對象。我怎樣才能定義一個錯誤信息，這樣如果一個字段是必需的，它會輸出「{name}是必需的」？看起來這可能是輸入元素本身的數據屬性，儘管我不知道如何訪問該屬性。

當然，我也有可能讓自己的事情變得完全困難。留在「AngularJS」世界中有沒有更好的方法來處理這個問題？

這是我一直在努力的jsFiddle的鏈接。

Answer 1

使用下面行讓每一個文本框中的值

var value = $scope.userForm[property].$name; 
var vl =$('*[name="' + value + '"]').data('required-message') 
$scope.validationErrors.push(vl); 

Answer 2

一個更容易和更清潔的方法是demonstrated here

簡而言之（其中將Form1窗體名稱屬性）：

<ul> 
    <li ng-repeat="(key, errors) in form1.$error track by $index"> <strong>{{ key }}</strong> errors 
    <ul> 
     <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li> 
    </ul> 
    </li> 
</ul> 

Answer 3

基於AngularJS 1.5.7 with ngMessages的完全動態驗證摘要，使用用戶可識別的字段名稱

錯誤消息的模板：

<script type="text/ng-template" id="error-messages"> 
    <span ng-message="required">This field is required.</span> 
    <span ng-message="email">Please enter a valid email.</span> 
</script> 

錯誤彙總（這裏的形式命名爲「candidateForm」）顯示：

 <div data-ng-if="candidateForm.$submitted && candidateForm.$invalid">    
      Please correct these fields and then try to send again: 
      <ul> 
      <li data-ng-repeat="field in candidateForm" data-ng-if="candidateForm[field.$name].$invalid"> 
       <div> 
       {{ getValFieldName(field) }} 
       <span data-ng-messages="candidateForm[field.$name].$error" role="alert"> 
        <span data-ng-messages-include="error-messages"></span> 
       </span> 
       </div> 
      </li> 
      </ul> 
     </div> 

一個輔助函數，以獲取標籤的名稱（而不是向用戶顯示輸入字段名稱或「內部ID代碼」）：

$scope.getValFieldName = function (field) { 
    return $("label[for=" + field.$name + "]").text(); // to get label associated with input field 
    // return $("#" + field.$name).attr("placeholder"); // to get placeholder of input field 
}; 

您可以在多個表單上重複使用這組標準錯誤消息，ngMessages確保每個字段只顯示一個錯誤，並且看起來按照它們在HTML中出現的順序列出了這些字段。

可能應該製作一個指令而不是jQuery風格的輔助函數，甚至可能希望在每個錯誤消息上添加一個點擊處理程序以滾動到具有錯誤的輸入字段。也許別人會用這個想法運行？