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;
                };
            }
        };
    });

8 comments:

  1. Thanks for the info. You have painted everything in great detail. Now, using passwords should be easier. AngulaJS material UI should simplify the work (thanks to your example). I plan to use the acquired knowledge for my app store search optimization project.

    ReplyDelete
  2. All this coding and programming language just went over my head. You must have been wondering then why did I even come to this post. Basically; this is my brother’s laptop and I borrowed it from him to buy Cheap Assignment Writing Services and he had this post opened. I thought of giving it a look and leaving my opinion at the end (lol).

    ReplyDelete
  3. Panther Jackets Is A Leather Jackets WareHouse Providing Jackets In USA, Canada and UK.With Free Shipping
    Bella Ciao Black Cotton Jacket
    Kith Navy Burgundy Bomber Varsity Wool Jacket

    ReplyDelete
  4. For students who have adopted English as a second language, some might struggle to write papers such as an essay. One https://essaysrescue.com/essay-typer-review/ might not be able to express their ideas well when they compose this essay, and that can cost them.

    ReplyDelete
  5. On their basis, it is possible to understand how the teacher buy coursework online right here sees the work, and what you need to do to get a high grade. If the requirements are clear, you can move directly to the execution of the task.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Waiting for your new interesting articles Bengals Starter jacket

    ReplyDelete

Blogroll

Popular Posts