Chapter 9: Cleaning up form errors with ngMessages

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-messages.min.js"></script>
<div ng-app="myApp">
    <form name="playerForm">
        <input type="text"
               name="playerName"
               ng-model="player.name"
               minlength="4"
               required />
        <div ng-messages="playerForm.playerName.$error"
             ng-messages-include="error-messages.html">
            <div ng-message="maxlength">
                A player name must be at least 8 characters
            </div>
        </div>
    </form>
    
    <script type="text/ng-template" id="error-messages.html">
        <div ng-message="required">
            Player name is required
        </div>
        <div ng-message="minlength">
            A player name must be at least 4 characters
        </div>
    </script>
</div>

JavaScript

angular.module('myApp', ['ngMessages']);