SodhanaLibrary

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.

Click here to see DEMO

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>