Simple example of how to use ngMessages directive with Ionic framework v1.0.0-beta.14 which uses Angular 1.3.6
These were the steps I took to create this example
-
ionic start ionicNgMessagesExample sidemenu
-
cd ionicNgMessagesExample
-
bower install angular-messages#1.3.6 --save
-
Add
<script src="lib/angular-messages/angular-messages.min.js"></script>
to www/index.html -
Inject ngMessages into www/js/app.js
angular.module('starter', ['ionic', 'starter.controllers','ngMessages'])
-
Create www/templates/error-messages.html with default messages that can be included from across the app. You can override any one of these at the field level if you needed to.
-
Modify www/templates/login.html to include ng-messages and name attributes for the HTML
and tags. -
Add ng-disabled="loginForm.$invalid" to the Log in button
-
I followed the blog post at http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html.
-
You should also watch https://egghead.io/lessons/angularjs-introduction-to-ng-messages-for-angularjs
-
You can also read this example http://calendee.com/2014/12/26/validation-in-ionic-framework-apps-with-ngmessages/
-
More information about $touched and $pending here http://www.htmlxprs.com/post/11/angularjs-1.3-form-validation-tutorial
-
And finally, official API documentation here https://docs.angularjs.org/api/ngMessages