javascript - what is the right way to compare two fields inside directive realization in angularjs? -


so, problem. have 2 input fields newpassword , oldpassword. want check if these 2 fields equals show error message. form looks like:

<form name="passwordform" ng-submit="submitpasswordform()" modelattribute="userpasswordchange" novalidate>         <div class="row">             <input path="oldpassword" type="password" id="oldpassword" name="oldpassword" placeholder="old password" ng-model="user.oldpassword" minlength="5" maxlength="128" required/>             <br>             <span ng-show="passwordform.oldpassword.$dirty && passwordform.oldpassword.$error.required">old password field can not empty. please check , try again.</span>             <span ng-show="passwordform.oldpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">old password field size must between 5 , 128</span>         </div>         <div class="row">             <input path="newpassword" type="password" id="newpassword" name="newpassword" placeholder="new password" ng-model="user.newpassword" minlength="5" maxlength="128" required diff-values="oldpassword"/>             <br>             <span ng-show="passwordform.newpassword.$dirty && passwordform.newpassword.$error.required">new password field can not empty. please check , try again.</span>             <span ng-show="passwordform.newpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">new password field size must between 5 , 128</span>             <span ng-show="passwordform.newpassword.$dirty && passwordform.newpassword.$error.differentvalues">new password , old password fields must have different values.</span>         </div>         <div class="row">             <input path="confirmpassword" type="password" id="confirmpassword" name="confirmpassword" placeholder="confirm password" ng-model="user.confirmpassword" minlength="5" maxlength="128" same required/>             <br>             <span ng-show="passwordform.confirmpassword.$dirty && passwordform.confirmpassword.$error.required">confirm password field can not empty. please check , try again.</span>             <span ng-show="passwordform.confirmpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">confirm password field size must between 5 , 128</span>         </div>         <div class="row">             <input id="save" type="submit" value="save" class="btn btn-primary" onsubmit="submitpasswordform()"                  ng-disabled="passwordform.oldpassword.$dirty && passwordform.oldpassword.$invalid                            || passwordform.newpassword.$dirty && passwordform.newpassword.$invalid                            || passwordform.confirmpassword.$dirty && passwordform.confirmpassword.$invalid"/>         </div> </form> 

so if have understood right, have create my own directive. realized in way:

var postpasswordform = angular.module('postpasswordform', []);     postpasswordform.directive('diffvalues', function () {         return {             restrict: "a",             link: function (scope, elem, attr, ctrl) {             ctrl.$parsers.push(function (value) {                 var comparewith = document.getelementbyid(attr.diffvalues).value;                 var currentvar = value;                 ctrl.$setvalidity('differentvalues', comparewith !== currentvar);                  console.log(scope);                     return value;             });         }     }; }); 

the problem task need observe when old password change, , according expression show\hide span:

<span ng-show="passwordform.newpassword.$dirty && passwordform.newpassword.$error.differentvalues">new password , old password fields must have different values.</span> 

and of course change value

passwordform.newpassword.$error.differentvalues: 

can me , explain how in right way? appreciate idea, explanations, , links. in advance.

i have solved in next way:

<form name="passwordform" ng-submit="submitpasswordform()" modelattribute="userpasswordchange" novalidate>         <div class="row">             <input path="oldpassword" type="password" id="oldpassword" name="oldpassword" placeholder="old password" ng-model="user.oldpassword" minlength="5" maxlength="128" required/>             <br>             <span ng-show="passwordform.oldpassword.$dirty && passwordform.oldpassword.$error.required">old password field can not empty. please check , try again.</span>             <span ng-show="passwordform.oldpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">old password field size must between 5 , 128</span>         </div>         <div class="row">             <input path="newpassword" type="password" id="newpassword" name="newpassword" placeholder="new password" ng-model="user.newpassword" minlength="5" maxlength="128" required diff-values="user.oldpassword"/>             <br>             <span ng-show="passwordform.newpassword.$dirty && passwordform.newpassword.$error.required">new password field can not empty. please check , try again.</span>             <span ng-show="passwordform.newpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">new password field size must between 5 , 128</span>             **changed here:**<span ng-show="passwordform.newpassword.$dirty && passwordform.newpassword.$error.differentvalues">new password field must different old password field.</span>         </div>         <div class="row">             <input path="confirmpassword" type="password" id="confirmpassword" name="confirmpassword" placeholder="confirm password" ng-model="user.confirmpassword" minlength="5" maxlength="128" same required/>             <br>             <span ng-show="passwordform.confirmpassword.$dirty && passwordform.confirmpassword.$error.required">confirm password field can not empty. please check , try again.</span>             <span ng-show="passwordform.confirmpassword.$error.minlength || passwordform.oldpassword.$error.maxlength">confirm password field size must between 5 , 128</span>         </div>         <div class="row">             <input id="save" type="submit" value="save" class="btn btn-primary" onsubmit="submitpasswordform()"                  ng-disabled="passwordform.oldpassword.$dirty && passwordform.oldpassword.$invalid                            || passwordform.newpassword.$dirty && passwordform.newpassword.$invalid                            || passwordform.confirmpassword.$dirty && passwordform.confirmpassword.$invalid"/>         </div> </form> 

and directive function changed one:

postpasswordform.directive('diffvalues', function () {         return {             restrict: "a",             require: 'ngmodel',             scope: {             othermodelvalue: "=diffvalues"             },             link: function (scope, elem, attr, ctrl) {             ctrl.$validators.diffvalues = function (modelvalue) {                 ctrl.$setvalidity('differentvalues', modelvalue !== scope.othermodelvalue);             };              scope.$watch("othermodelvalue", function () {                 ctrl.$validate();             });         }     }; }); 

i started use angular yesterday first time, sorry if ask simple things. , understood 1 not better solutions because documentation can read $validate() - invoke validators $validators collection. need run 1 of them. can somehow? or solution ok?


Comments

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -