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