angular1.3 form validation ngmessages

ngmessages in action

by Touqeer Shafi

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.js"></script>
<div ng-app="formApp">
    <form name="userForm" novalidate>
    {{userForm.email.$touched}}
        <div>
            <input type="text" ng-pattern="/^[a-zA-Z0-9]$/" ng-model="user.username" name="username" placeholder="Username" ng-required="true" />    
            <div ng-messages="userForm.username.$error">
                <div ng-message="required" ng-if="!userForm.$pristine">
                    username is required
                </div>
                <div ng-message="pattern">
                    username must contain only letters or number
                </div>
            </div>
        </div>
        <div>
            <input type="email" ng-model="user.email" name="email" placeholder="Email" ng-required="true" />    
            <div ng-messages="userForm.email.$error" ng-if="userForm.email.$touched == true">
                <div ng-message="required">
                    email is required
                </div>
                <div ng-message="email">
                    enter a valid email
                </div>
            </div>
        </div>
        <div>
            <input type="url" ng-model="user.url" name="url" placeholder="Url"/>    
            <div ng-messages="userForm.url.$error">
                <div ng-message="url">
                    enter a valid url
                </div>
            </div>
        </div>
        <div>
            <button type="reset" ng-disabled="userForm.$pristine">Reset</button>  
            <button type="submit" ng-disabled="!userForm.$valid">Register</button>    
        </div>
        
    
    </form>
</div>

JavaScript

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