Chapter 9: Cleaning up form errors with ngMessages

by msfrisbie

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 />
        <!-- ng-messages block will handle the field $error object -->
        <div ng-messages="playerForm.playerName.$error">
            <!-- each ng-message handles a single error condition -->
            <div ng-message="required">
                Player name is required
            </div>
            <div ng-message="minlength">
                A player name must be at least 4 characters
            </div>
        </div>
    </form>
</div>

JavaScript

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