adding basic validation demo

Author: tilwinjoy

demos/index.html

@@ -264,6 +264,14 @@ <h3>Toggle Button</h3>
       </div>
     </div>
   </div>
+  <div id="form-validation" class="container-fluid">
+    <div class="row">
+      <div class="col-xs-12">
+        <h3>Form Validation</h3>
+        <ng-include src="'validation/demo.html'"></ng-include>
+      </div>
+    </div>
+  </div>
   <script src="../bower_components/angular/angular.js"></script>
   <script src="../bower_components/angular-messages/angular-messages.js"></script>
   <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
@@ -279,6 +287,7 @@ <h3>Toggle Button</h3>
   <script src="progressbar/demo.js"></script>
   <script src="tabs/demo.js"></script>
   <script src="tooltip/demo.js"></script>
+  <script src="validation/demo.js"></script>
 </body>
 
 </html>

demos/validation/demo.details

@@ -0,0 +1,23 @@
+Everything before the line containing only '---' will not be parsed
+
+---
+ name: Angular Bootstrap Material - Validation
+ description: Example for form validation with Angular Bootstrap Material
+ authors:
+   - Tilwin joy
+ resources:
+   - https://fonts.googleapis.com/css?family=Open+Sans:400,700
+   - https://fonts.googleapis.com/css?family=Roboto:300,400,500,700
+   - https://fonts.googleapis.com/icon?family=Material+Icons
+   - https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
+   - https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css
+   - https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css
+   - https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js
+   - https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js
+   - https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js
+   - https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js
+   - ../index.js
+ normalize_css: no
+ ...
+
+Everything after the line containing only '...' will not be parsed

demos/validation/demo.html

@@ -0,0 +1,41 @@
+<div class="row" ng-controller="validationDemoCtrl">
+  <div class="col-xs-12 col-sm-6">
+    <form name="signup">
+      <abm-form-group error-messages="errorMap">
+        <label data-abm-label type="floating">Name</label>
+        <input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required>
+      </abm-form-group>
+      <abm-form-group error-messages="errorMap">
+        <label data-abm-label>Email</label>
+        <input type="email" name="email" class="form-control" placeholder="johndoe@mail.com" abm-form-control ng-model="user.email" required>
+      </abm-form-group>
+      <abm-form-group>
+        <label>Prefered notifications via:</label>
+        <div class="checkbox" abm-checkbox label="Text Message">
+          <input type="checkbox" name="notifications" ng-model="user.notifications.text">
+        </div>
+        <div class="checkbox" abm-checkbox label="Email">
+          <input type="checkbox" name="notifications" ng-model="user.notifications.email">
+        </div>
+      </abm-form-group>
+      <div class="togglebutton" abm-toggle label="Premium Account">
+        <input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=null">
+      </div>
+      <fieldset ng-disabled="!user.premium">
+        <abm-form-group error-messages="errorMap">
+          <label>Prefered payment method</label>
+          <div class="radio" abm-radio label="Net banking">
+            <input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium">
+          </div>
+          <div class="radio" abm-radio label="Credit card">
+            <input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium">
+          </div>
+        </abm-form-group>
+      </fieldset>
+      <a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a>
+    </form>
+  </div>
+  <div class="col-xs-12 col-sm-6">
+    <pre>{{user | json}}</pre>
+  </div>
+</div>

demos/validation/demo.js

@@ -0,0 +1,14 @@
+angular.module('angularBootstrapMaterialDocs')
+  .controller('validationDemoCtrl', ['$scope', function ($scope) {
+    $scope.user = {
+      name: "",
+      notifications: {}
+    }
+    $scope.errorMap = {
+      required: "This field is mandatory",
+      email: "Please enter a valid email"
+    }
+    $scope.change = function () {
+      console.log($scope);
+    }
+}]);