- Part 2

Create Directive To Match Password In Angular JS

January 11, 2015 by blogmeister·0 Comments

Here is my code in Angular JS to check if two password fields match.

module.directive('passwordMatch', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            var checker = function () {
                var e1 = scope.$eval(attrs.ngModel); 
                var e2 = scope.$eval(attrs.passwordMatch);
                return (!e1 && !e2) || e1 == e2;
            };
            scope.$watch(checker, function(n) {
                controller.$setValidity('passwordMatch', n);
            });
        }
    };
}]);

module.directive('passwordMatch', [function () {

return {

restrict: 'A',

require: 'ngModel',

link: function (scope, elem, attrs, controller) {

var checker = function () {

var e1 = scope.$eval(attrs.ngModel);

var e2 = scope.$eval(attrs.passwordMatch);

return (!e1 && !e2) || e1 == e2;

};

scope.$watch(checker, function(n) {

controller.$setValidity('passwordMatch', n);

});

}

};

}]);

And the HTML tags look like this:

<span style="color:red" ng-show="myform.password.$error.passwordMatch">Passwords do not match!<br/></span>
<input type="password" name="password" ng-model="myform.NewPassword" required="true"
	password-match="myform.RetypePassword" 
/>
<input type="password" name="retypePassword" ng-model="myform.RetypePassword" required="true"
/>

<span style="color:red" ng-show="myform.password.$error.passwordMatch">Passwords do not match!<br/></span>

<input type="password" name="password" ng-model="myform.NewPassword" required="true"

password-match="myform.RetypePassword"

<input type="password" name="retypePassword" ng-model="myform.RetypePassword" required="true"

Also, you may want to add some CSS styling to your password fields to highlight its border to red if the value is not valid. Just add this CSS code:

input.ng-dirty.ng-invalid {
	border-color: red;
}

input.ng-dirty.ng-invalid {

border-color: red;

}

Go To Specific Tab In JQuery Tabs

January 5, 2015 by blogmeister·0 Comments

Easy. $("#tabs").tabs("option", "active", #); where # is the index number of the tab.

JQuery DatePicker Does Not Work With Angular JS

January 1, 2015 by blogmeister·0 Comments

This took me a bit to deduce that got me confused why form.$valid always returns false even though there is already a date chosen from JQuery’s DatePicker.

The date input text field was set to required so even though I chose a date from the date picker, the value is not assigned to the ng-model of that input text field.

So it does not work with Angular JS. At least unless you do something about it. From Abequar.net, bema managed to make an Angular directive for JQuery’s date picker using this code.

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'mm/dd/yy',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

app.directive('datepicker', function() {

return {

restrict: 'A',

require : 'ngModel',

link : function (scope, element, attrs, ngModelCtrl) {

$(function(){

element.datepicker({

dateFormat:'mm/dd/yy',

onSelect:function (date) {

scope.$apply(function () {

ngModelCtrl.$setViewValue(date);

});

}

});

}

});

And the HTML code will look something like this:

<input type="text" ng-model="date" datepicker required="true"/>

1	<input type="text" ng-model="date" datepicker required="true"/>

So a big thank you to bema who made it easier for developers to still use JQuery’s date picker rather than other Angular JS custom date pickers.

An important thing to note is that the Javascript libraries should be added in the following order:
1 – Jquery
2 – Jquery-ui
3 – angularjs

else, it won’t work.

Tech Tips & Tricks

tech tips gadgets programming software

Month: January 2015

Create Directive To Match Password In Angular JS

Go To Specific Tab In JQuery Tabs

JQuery DatePicker Does Not Work With Angular JS