Reset Password Through Directives not Working.

[Trapti Gupta]

This is directive..

sample.directive('pwCheck', function () { 

    //creating custom directive

  return {

 require: 'ngModel',

 link: function (scope, currentEl, attrs, ctrl) {

 var comparefield = document.getElementsByName(attrs.ngCompare)[0]; //getting first element

 compareEl = angular.element(comparefield);

 

 //current field key up

 currentEl.on('keyup', function () {

 if (compareEl.val() != "") {

 var isMatch = currentEl.val() === compareEl.val();

 ctrl.$setValidity('compare', isMatch);

 scope.$digest();

 }

 });

 

 //Element to compare field key up

 compareEl.on('keyup', function () {

 if (currentEl.val() != "") {

 var isMatch = currentEl.val() === compareEl.val();

 ctrl.$setValidity('compare', isMatch);

 scope.$digest();

 }

 });

 }

 }

});

and This is my ejs.

<h1>Setting</h1>

<h3>Change Password</h3>

<script type="text/javascript">

    window.SAILS_LOCALS = { _csrf: "<%= _csrf %>" };

    </script>

    <style type="text/css">

    body { padding-top: 20px; padding-left: 20px; }

    input.ng-pristine.ng-invalid { border: dashed 2px red; }

    input.ng-dirty.ng-invalid { border: solid 2px red; }

    input.ng-dirty.ng-valid { border: solid 2px green; }

     {

    font-family: Verdana, monospace;

    }

body {

  background: url('http://subtlepatterns.com/patterns/congruent_outline.png') repeat 0 0;

  font-family: Verdana, monospace;

}

input {

  font-size: 1em;

  padding: 1em;

}

    </style>

    

<div ng-controller="PatientSetting" class="container">

    <form name="form">

    

      

     <div class="form-group col-sm-4">

        <label>New Password:</label>

      </div>

     

     <div class="form-group col-sm-2" ng-class="{'has-error':form.pw1.$invalid &&

                              form.pw1.$dirty}">

        <input type="{{inputType}}" id="pw1" name="pw1" ng-model="p.pw1" required class="form-control" placeholder="New Password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/"/>

         <input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShowPassword()" />

         <label for="checkbox" ng-if="passwordCheckbox">Hide password</label>

         <label for="checkbox" ng-if="!passwordCheckbox">Show password</label>  

        

          <span ng-show="form.pw1.$error.required"></span>

          <span ng-show="!form.pw1.$error.required && (form.pw1.$error.minlength || form.pw1.$error.maxlength) && form.pw1.$dirty">Passwords must be between 8 and 20 characters.</span>

          <span ng-show="!form.pw1.$error.required && !form.pw1.$error.minlength && !form.pw1.$error.maxlength && form.pw1.$error.pattern && form.pw1.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</span>

        

    </div>

    <br/>

    

    

<div class="form-group col-sm-4">

        <label>Confirm Password:</label>

    </div>

     

     <div class="form-group col-sm-2" ng-class="{'has-error':form.pw2.$invalid && form.pw2.$dirty}">

       

        

        <input type="{{inputType}}" name="pw2" id="pw2" ng-model="p.pw2" class="form-control" placeholder="Confirm Password" required pw-check ng-class="{'has-error':form.pw2.$invalid}"/>

        <input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShowPassword()" />

         <label for="checkbox" ng-if="passwordCheckbox">Hide password</label>

         <label for="checkbox" ng-if="!passwordCheckbox">Show password</label>  

        

        <span ng-show="form.pw2.$error.required"></span>

        

        <span ng-show="!form.pw2.$error.required && form.pw2.$error.noMatch &&  form.pw2.$dirty">Passwords do not match.</span>

     </div>

    

    <br/>

   

     

     <div class="form-group col-sm-2">

        <button type="button" class="btn btn-success" ng-click="change()" ng-disabled="!form.$valid">Change</button>{{message}}

    </div>

    </form>

    </div>