Validation summary with custom message for each field in Angular JS

It is a common requirement to list down all the validation errors of a form in one place, however when using Angular, this gets a little tricky to do it the “Angular Way”.

1. Showing validation summary of the form

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

Screenshot : This can be demoed here –

enter image description here

2. Showing Errors next to input fields

<form name="userForm" ng-submit="submitForm()" novalidate>
 <div class="form-group" ng-class="{ 'has-error' :$invalid && !$pristine }">
   <input type="text" name="name" class="form-control" ng-model="" required>
   <p ng-show="$invalid && !$pristine" class="help-block">You name is required.</p>

3. Disabling the form submit button, if any of the form input fields are invalid.

<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>