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

12 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. thank you.
    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  3. 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
  4. RightJackets is the best place for you to get the most original custom made products and more.We have the biggest range of a variety of products.
    Bajan Canadian Red Check Fleece Jacket
    Raey Tie-Waist Black Real Leather Jacket

    ReplyDelete
  5. RockStar Jackets is incredibly pleased to announce ourselves as the most dependable manufacturers and exporters of a variety of products comprising of Leather Garments.
    San Francisco Dons Varsity Wool Jacket
    Victoria Beckham Cropped Biker Leather Jacket

    ReplyDelete
  6. We are providing chat for creators, so all creators are able to chat with each others.
    How to create an NFT

    ReplyDelete
  7. 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
  8. Health is more important in our life other then any thing, all we should care about the health, weight lose is very important factor on weight lose we all need to take care of our weight.
    12 diet and exercise tips
    NHS weight loss plan

    ReplyDelete
  9. We Introduce Bomber Jacket In United State With Premium Quality Leather Used In Making Leather Jackets

    ReplyDelete
  10. 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
  11. 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

Blogroll

Popular Posts