Issue Jakobovski#111: Adjusted the demo to use angular-messages

Author: JSlain

bower.json

@@ -32,10 +32,10 @@
   "dependencies": {
     "angular": ">=1.3.0",
     "jquery": "~2.1.4"
-
   },
   "devDependencies": {
-    "angular-mocks": "~1.4.1"
+    "angular-mocks": "~1.4.1",
+    "angular-messages": "^1.6.2"
   },
   "homepage": "https://github.com/turinggroup/angular-validator"
 }

demo/app.js

@@ -1,4 +1,4 @@
-angular.module('angular-validator-demo', ['angularValidator']);
+angular.module('angular-validator-demo', ['angularValidator', 'ngMessages']);
 
 
 angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) {

demo/index.html

@@ -178,7 +178,7 @@ <h4>Field invalid message hides form invalid message</h4>
         </form>
 
         <form angular-validator-submit="submitMyForm()" name="myForm3" class="form-horizontal" novalidate angular-validator >
-            <h4>Using Field angular-validator-quiet</h4>
+            <h4>Using Field angular-validator-quiet (with angular-messages)</h4>
             <div class="form-group">
                 <label class="col-sm-2 control-label">Field 1 max length 5</label>
                 <div class="col-sm-10">
@@ -189,9 +189,9 @@ <h4>Using Field angular-validator-quiet</h4>
                             ng-maxlength="5"
                             required
                             angular-validator-quiet></div>
-                <div class="col-sm-12" ng-if="myForm3.submitted" ng-cloak="">
-                    <div class="alert alert-danger" ng-if="myForm3.form3input.$error.required">"Required" message with manual template</div>
-                    <div class="alert alert-danger" ng-if="myForm3.form3input.$error.maxlength">"Max Length" message with manual template</div>
+                <div class="col-sm-12" ng-messages="myForm3.form3input.$error" ng-if="myForm3.submitted" ng-cloak="">
+                    <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
+                    <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
                 </div>
             </div>
             <div class="form-group">
@@ -215,7 +215,7 @@ <h4>Using Field angular-validator-quiet</h4>
         </form>
 
         <form angular-validator-submit="submitMyForm()" name="myForm4" class="form-horizontal" novalidate angular-validator angular-validator-quiet>
-            <h4>Using Form angular-validator-quiet</h4>
+            <h4>Using Form angular-validator-quiet (with angular-messages)</h4>
             <div class="form-group">
                 <label class="col-sm-2 control-label">Field 1 max length 5</label>
                 <div class="col-sm-10">
@@ -225,9 +225,9 @@ <h4>Using Form angular-validator-quiet</h4>
                             ng-model="form4input"
                             ng-maxlength="5"
                             required></div>
-                <div class="col-sm-12" ng-if="myForm4.submitted" ng-cloak="">
-                    <div class="alert alert-danger" ng-if="myForm4.form4input.$error.required">"Required" message with manual template</div>
-                    <div class="alert alert-danger" ng-if="myForm4.form4input.$error.maxlength">"Max Length" message with manual template</div>
+                <div class="col-sm-12" ng-if="myForm4.submitted" ng-messages="myForm4.form4input.$error" ng-cloak="">
+                    <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
+                    <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
                 </div>
             </div>
             <div class="form-group">
@@ -239,9 +239,9 @@ <h4>Using Form angular-validator-quiet</h4>
                             ng-model="form4input2"
                             ng-maxlength="5"
                             required></div>
-                <div class="col-sm-12" ng-if="myForm4.submitted" ng-cloak="">
-                    <div class="alert alert-danger" ng-if="myForm4.form4input2.$error.required">"Required" message with manual template</div>
-                    <div class="alert alert-danger" ng-if="myForm4.form4input2.$error.maxlength">"Max Length" message with manual template</div>
+                <div class="col-sm-12" ng-if="myForm4.submitted" ng-messages="myForm4.form4input2.$error" ng-cloak="">
+                    <div class="alert alert-danger" ng-message="required">"Required" message with manual template</div>
+                    <div class="alert alert-danger" ng-message="maxlength">"Max Length" message with manual template</div>
                 </div>
             </div>
             <hr>
@@ -267,6 +267,7 @@ <h4> <u>Scope Sneak Peak</u>
     </div>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
     <script src="app.js"></script>
+    <script src="/bower_components/angular-messages/angular-messages.js"></script>
     <script src="../dist/angular-validator.js"></script>
 
 </body>