RegisterForm

RegisterForm, Angularjs & Boostrap

by meziantou

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="sample">
    <form class="form-horizontal" name="registerForm">
        <div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.Email.$invalid, 'has-success': registerForm.Email.$valid}">
            <label class="col-sm-3 control-label" for="Email">Email</label>
            <div class="col-sm-9">
                <input id="Email" type="email" class="form-control" required name="Email" ng-model="Email" />
            </div>
        </div>
        <div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.Password.$invalid, 'has-success': registerForm.Password.$valid}">
            <label class="col-sm-3 control-label" for="Password">Password</label>
            <div class="col-sm-9">
                <input id="Password" type="password" class="form-control" required ng-minlength="6" name="Password" ng-model="Password" />
            </div> <span class="text-danger col-sm-offset-3" ng-show="registerForm.Password.$error.minlength">
                    Password too short
                </span>

        </div>
        <div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.ConfirmPassword.$invalid, 'has-success': registerForm.ConfirmPassword.$valid}">
            <label class="col-sm-3 control-label" for="ConfirmPassword">Confirm Password</label>
            <div class="col-sm-9">
                <input id="ConfirmPassword" type="password" class="form-control" required equals-to="registerForm.Password" name="ConfirmPassword" ng-model="ConfirmPassword" />
            </div> <span class="text-danger col-sm-offset-3" ng-show="!registerForm.ConfirmPassword.$error.required && registerForm.ConfirmPassword.$error.equalsTo">
                    Passwords are differents
                </span>

        </div>
        <div class="form-group">
            <div class="col-sm-offset-3...

CSS

body {
    padding: 30px;
}

JavaScript

var app = angular.module('sample', [])
    .directive('equalsTo', [function () {
    /*
     * <input type="password" ng-model="Password" />
     * <input type="password" ng-model="ConfirmPassword" equals-to="Password" />
     */
    return {
        restrict: 'A', // S'utilise uniquement en tant qu'attribut
        scope: true,
        require: 'ngModel',
        link: function (scope, elem, attrs, control) {
            var check = function () {
                //Valeur du champs courant 
                var v1 = scope.$eval(attrs.ngModel); // attrs.ngModel = “ConfirmPassword”

                //valeur du champ à comparer
                var v2 = scope.$eval(attrs.equalsTo).$viewValue; // attrs.equalsTo = “Password”

                return v1 == v2;
            };

            scope.$watch(check, function (isValid) {
                // Défini si le champ est valide
                control.$setValidity("equalsTo", isValid);
            });
        }
    };
}]);