Recently I have created form validations for Change Password functionality.  This form will have 4 important fields ( User-id, Old-password, New-password, Confirm-password). Here Old-password should not equal to New-password and New-password should be equal to Confirm-password. Now here we need two directives. One directive is matching Old-password with New-password and another is for matching New-password with Confirm password. In this article, I have implemented the example with AngulaJS material UI.

Directives 

Here in below code, you can find two directives. unMatcher returns true, If 2 input fields are not equal. matcher returns true, If 2 input fields are equal 
app.directive("unMatcher", function($timeout) {
        return {
            restrict : "A",

            require : "ngModel",

            link : function(scope, element, attributes, ngModel) {
                ngModel.$validators.unMatcher = function(modelValue) {
                    return attributes.unMatcher !== modelValue;
                };
            }
        };
    });

app.directive("matcher", function($timeout) {
        return {
            restrict : "A",

            require : "ngModel",

            link : function(scope, element, attributes, ngModel) {
                ngModel.$validators.matcher = function(modelValue) {
                    return attributes.matcher === modelValue;
                };
            }
        };
    });

Change Password Form Validation

Now I am going to implement change password form field validation here. Find highlighted part of  below code.  
<div ng-controller="AppCtrl" class="header" ng-app="MyApp"
    style="margin: auto; width: 800px">
    <form name="userForm">
        <md-input-container flex> 
          <label>Old Password</label> 
          <input type="password" name="oldPassword" ng-model="oldPassword" required>
          <div ng-messages="userForm.oldPassword.$error">
              <div ng-message="required">This is required.</div>
           </div>
        </md-input-container>
        <md-input-container flex> 
          <label>New Password</label> 
          <input type="password" name="newPassword" ng-model="newPassword" required un-matcher="{{oldPassword}}">
          <div ng-messages="userForm.newPassword.$error">
              <div ng-message="required">This is required.</div>
              <div ng-message="unMatcher">New Password cannot be same as Old Password.</div>
           </div>
        </md-input-container>
        <md-input-container flex> 
          <label>Confirm Password</label> 
          <input type="password" name="confirmPassword" ng-model="confirmPassword" required matcher="{{oldPassword}}">
          <div ng-messages="userForm.confirmPassword.$error">
              <div ng-message="required">This is required.</div>
              <div ng-message="matcher">Confirm Password should be same as old Password.</div>
           </div>
        </md-input-container>
        <md-button class="md-raised md-primary" ng-disabled="userForm.$invalid">Sumbit</md-button>
    </form>
</div>

Whole JS code

Here ngMaterial is for handling material directives and ngMessages is showing error messages
var app = angular.module('MyApp', [ 'ngMaterial', 'ngMessages' ]);

    app.controller('AppCtrl', function($scope) {
       $scope.oldPassword = '';
       $scope.newPassword = '';
       $scope.confirmPassword = '';
    });

    app.directive("unMatcher", function($timeout) {
        return {
            restrict : "A",

            require : "ngModel",

            link : function(scope, element, attributes, ngModel) {
                ngModel.$validators.unMatcher = function(modelValue) {
                    return attributes.unMatcher !== modelValue;
                };
            }
        };
    });

    app.directive("matcher", function($timeout) {
        return {
            restrict : "A",

            require : "ngModel",

            link : function(scope, element, attributes, ngModel) {
                ngModel.$validators.matcher = function(modelValue) {
                    return attributes.matcher === modelValue;
                };
            }
        };
    });
Read More
This article is for handling overflown menu items in mobile web. Whenever you create header menu with lot many menu items, How will you handle them in mobile web ? , yes, using media queries.  Lets design this functionality. Here I am using some example code from previous article, so please read previous article before reading this article

Header Design

Observe below design. It contains many icons right side. It won't fit into mobile device web browser.
So we need to use media queries to get below look and feel
Here you can find right most more icon button. Whenever user clicks on that icon, One sheet with all options  has to be opened.

Using Bottom Sheet

Here whenever user clicks on more icon, The bottom sheet will be shown like below screen. Find below code for bottom sheet. Here md-list class is responsible for list display
<script type="text/ng-template" id="/bottom-list-sheet.html">
<md-bottom-sheet class="md-list">
 <md-list>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE851;  </md-icon>
   <p>User</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
   <p>Messages</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="material-icons">&#xE150;</md-icon>
   <p>Create Post</p>
 </md-list-item>
 <md-list-item>
   <md-icon class="md-default-theme" class="material-icons">&#xE8B8;  </md-icon>
   <p>Settings</p>
  </md-list-item>
  <md-list-item>
   <md-icon class="material-icons">&#xE7F4;</md-icon>
   <p>Alerts</p>
  </md-list-item>
  <md-list-item>
   <md-icon class="material-icons">&#xE887;</md-icon>
   <p>Help</p>
  </md-list-item>
 </md-list>
</md-bottom-sheet>
</script>

JS Code

Here you can find JS code. The bottom sheet will be displayed whenever showListBottomSheet called
angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdSidenav, $mdBottomSheet) {
    $scope.showMobileMainHeader = true;
    
    $scope.showListBottomSheet = function($event) {
        $mdBottomSheet.show({
          templateUrl: '/bottom-list-sheet.html',
          targetEvent: $event
        });
    };  
});

More Button Code

<md-button class="md-icon-button" aria-label="More" ng-click="showListBottomSheet()">
    <md-tooltip>More</md-tooltip>
    <md-icon class="material-icons">&#xE5D4;</md-icon>
</md-button>
Here showListBottomSheet  will be called, when user clicks on more icon button. Find below code for more button functionality

Grid List

In above example, we are showing more options as list items, but we can show the list in grid also. It needs little HTML and JS changes

HTML Code

Observe the below code. md-grid class is responsible for grid view display. md-grid-item-content class gives grid look to button
<md-bottom-sheet class="md-grid">
  <md-list>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE851;</md-icon>
         <div class="md-grid-text">User</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
         <div class="md-grid-text">Messages</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE150;</md-icon>
         <div class="md-grid-text">Create Post</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="md-default-theme" class="material-icons">&#xE8B8;</md-icon>
         <div class="md-grid-text">Settings</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE7F4;</md-icon>
         <div class="md-grid-text">Alerts</div>
      </md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-grid-item-content">
         <md-icon class="material-icons">&#xE887;</md-icon>
         <div class="md-grid-text">Help</div>
      </md-button>
    </md-list-item>
  </md-list>
</md-bottom-sheet>
Click here to see DEMO

Using right side panel

You can implement this by using right side panel also. Read previous article to know how side panel works. 

Read More
This is continuation of previous article. In previous article, I have explained header design. Now I will explain side navigation panel. I am going to use previous article code so please read the previous article first.Whenever user clicks on left most menu icon, side navigation panel has to be displayed.

Add Menu Button To Header

Add this below menu button
<md-button class="md-icon-button" aria-label="Side Panel" ng-click="openSideNavPanel()">
     <md-tooltip>Side Panel</md-tooltip>
     <md-icon class="md-default-theme" class="material-icons">&#xE5D2;</md-icon>
</md-button>
Now this header looks like below screenshot

Side Navigation Code

Here you can find md-component-id="left" in below code.  This id will be used for opening and closing side panels. Here md-sidenav-left is the class which keeps panel left side.
<md-sidenav class="md-sidenav-left md-whiteframe-z2"
        md-component-id="left">
    <md-toolbar layout="row">
     <div class="md-toolbar-tools">
        <h2>
          <span>Side Panel</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()">
          <md-tooltip>Close Side Panel</md-tooltip>
          <md-icon class="md-default-theme" class="material-icons">&#xE5CD;</md-icon>
        </md-button>
       </div>
    </md-toolbar> 
    <md-content layout-padding="">
      Side navigation Panel
    </md-content> 
</md-sidenav>

JS Code for Side Navigation Panel

Add below side navigation code to controller
angular.module('MyApp')
.controller('AppCtrl', function($scope, $mdSidenav) {
    $scope.showMobileMainHeader = true;
    $scope.openSideNavPanel = function() {
        $mdSidenav('left').open();
    };
    $scope.closeSideNavPanel = function() {
        $mdSidenav('left').close();
    };
})


Add List Items To Left Side Navigation Panel

Add list items to side panel.  Observe the below code. The yellow highlighted code was headings and the dividers were highlighted with orange color.
<md-list>
      <md-subheader class="md-no-sticky">Favorites</md-subheader>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE0C9;</md-icon>
        <p>Messages</p>
        <div class="md-secondary">2</div>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE878;</md-icon>
        <p>Events</p>
        <md-icon class="md-secondary">2</md-icon>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE251;</md-icon>
        <p>Photos</p>
        <md-icon class="md-secondary">2</md-icon>
      </md-list-item>
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">Pages</md-subheader>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE7F9;</md-icon>
        <p>Pages Feed</p>
        <div class="md-secondary">2</div>
      </md-list-item>
      <md-list-item>
        <md-icon class="md-default-theme" class="material-icons">&#xE1BC;</md-icon>
        <p>Like Pages</p>
        <div class="md-secondary">20+</div>
      </md-list-item>
 </md-list>

Add this Panel to Right Side

Instead of using md-sidenav-left, use md-sidenav-right class. md-sidenav-right will keeps the panel right side  
<md-sidenav class="md-sidenav-right md-whiteframe-z2"
        md-component-id="left">
    <md-toolbar layout="row">
     <div class="md-toolbar-tools">
        <h2>
          <span>Side Panel</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()">
          <md-tooltip>Close Side Panel</md-tooltip>
          <md-icon class="md-default-theme" class="material-icons">&#xE5CD;</md-icon>
        </md-button>
       </div>
    </md-toolbar> 
    <md-content layout-padding="">
      Side navigation Panel
    </md-content> 
</md-sidenav>
Read More

Blogroll


Follow this blog by Email

Popular Posts