title: Form validation summary in AngularJS with custom message per field
body: <p>I'm trying to render a validation summary on a page using AngularJS.  Here's what I have so far:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app&gt;
      &lt;div ng-controller="ctrl"&gt;
          &lt;form name="userForm"&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;User Info&lt;/legend&gt;
                  &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" required ng-maxlength="15" name="name" ng-model="name" /&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label&gt;Age: &lt;input type="number" required name="age" ng-model="age" /&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;label&gt;Favorite Color: &lt;input type="text" required name="favColor" ng-model="favColor" /&gt;&lt;/label&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;input type="button" value="Submit" ng-click="submitForm()" /&gt;&lt;/p&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
          &lt;div id="validationSummary" ng-show="hasValidationErrors()"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="error in validationErrors"&gt;{{ error }}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my controller, I'm creating an array with all of the errors.</p>
  
  <pre class="lang-js prettyprint-override"><code>function ctrl($scope) {
  
      $scope.hasValidationErrors = function () {
          return $scope.validationErrors &amp;&amp; $scope.validationErrors.length &gt; 0;
      };
  
      $scope.submitForm = function() {
          $scope.validationErrors = [];
  
          for (var property in $scope.userForm) {
              if ($scope.userForm.hasOwnProperty(property) &amp;&amp; $scope.userForm[property].$invalid) {
                  $scope.validationErrors.push($scope.userForm[property].$name);
              }
          }
      }
  }
  </code></pre>
  
  <p>The thing I can't figure out is:  how can I get more than just the name of each field that is invalid?  I've noticed that there is also an <code>$error</code> property on each field.  Outputting this instead of <code>$name</code> gives me the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>{"required":true,"maxlength":false}
  {"required":true,"number":false}
  {"required":true}
  </code></pre>
  
  <p>So I can get the field name, and I can get an object that describes what is wrong with that particular field.  How can I define an error message, so that if a field is required it will output "{name} is required"?  It seems like this could be a data- attribute on the input element itself, although I don't know how I would access that attribute.</p>
  
  <p>Of course, it's also possible that I'm making things entirely too difficult on myself.  Is there a better way to approach this while staying in the "AngularJS" world?</p>
  
  <p>Here's a link to the <a href="http://jsfiddle.net/3JTyg/2/" rel="nofollow">jsFiddle</a> I've been working on.</p>