Validation Summary

Display a validation summary of all the current form errors. Validation summary can be called through 2 properties $scope.$validationSummary or $scope.formName.$validationSummary(the latter will only work if your html Form object has a name attribute. For example <form name="form1"> would then have a $scope.form1.$validationSummary).

Each items appearing in the validation summary are holding 3 properties:
{ field: 'input1', friendlyName: 'First Name', message 'Field is Required' }.

The friendlyName only exist if you used the friendly-name="Your Friendly Name" attribute on your element. Also note that the friendly-name attribute will ONLY be used in the ValidationSummary, so if you do plan to use the ValidationSummary then you would probably want to add a friendly name, otherwise you could skip it.

The code sample displayed at the bottom is only meant for showing the Validation Summary but you most probably would want to prevent the Form from being submitted when invalid or submit it when it does become valid. I will leave it up to you to code it the way you want.

<!-- Form Validation Summary -->
<div class="alert alert-danger alert-dismissable" ng-show="displayValidationSummary">
    <ul>
        <li ng-repeat="item in form1.$validationSummary">{{item.field }}: {{item.message}}</li>
    </ul>
</div>

<!-- or with friendly-name attribute -->
<div class="alert alert-danger alert-dismissable" ng-show="displayValidationSummary">
    <ul>
        <li ng-repeat="item in form1.$validationSummary">{{item.friendlyName }}: {{item.message}}</li>
    </ul>
</div>

<!-- or be safer and use both -->
<div class="alert alert-danger alert-dismissable" ng-show="displayValidationSummary">
    <ul>
        <li ng-repeat="item in form1.$validationSummary">{{ item.friendlyName != '' ? item.friendlyName : item.field }}: {{item.message}}</li>
    </ul>
</div>

<form novalidate name="form1" method="POST">
  <button type="submit" ng-click="$scope.displayValidationSummary = true;">Show Validation Summary</button>
</form>