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
Post a Comment