Home
Run »
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>AngularJS ngMessage Sample</title> <script src="https://www.techstrikers.com/AngularJS/Includes/angular.min.js"></script> <script src="https://www.techstrikers.com/AngularJS/Includes/angular-messages.js"></script> <script type="text/javascript"> (function(angular) { 'use strict'; angular.module('ngMessageExample', ['ngMessage']); })(window.angular); </script> </head> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS ngMessage Example</legend> <body ng-app="ngMessageExample"> <form name="myForm"> <div style="font-family:Arial;margin:10px;width:350px;"> <label>Enter first name:</label> <input type="text" name="firstName" ng-model="name1" required minlength="5" maxlength="20"/><br> <label>Enter last name:</label> <input type="text" name="lastName" ng-model="name2" required minlength="5" maxlength="20"/><br/><br/> </div> <div ng-messages="myForm.firstName.$error" role="alert"> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="required">You did not enter first name</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="minlength">First name is too short</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="maxlength">First name is too long</div> </div> <div ng-messages="myForm.lastName.$error" role="alert"> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="required">You did not enter last name</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="minlength">Last name is too short</div> <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-message="maxlength">Last name is too long</div> </div> </form> </fieldset> </body> </html>