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 &
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>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
