Wednesday, 1 March 2017

Validation In ModalPopUp

No comments

HTML
<script id="templates/changePassword.html" type="text/ng-template">
    <ion-modal-view class="grey_bg">
        <ion-nav-bar class="bar-balanced">
            <ion-nav-title>
                Change Password
            </ion-nav-title>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-close-round"
 ng-click="ChangePassword()"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-content class="has-header toTransofrm" padding="10">
            <div class="list">
                <form class="register-form" name="formRegister">
                    <label class="item item-input" 
ng-class="{ 'has-errors' : formRegister.oldPassword.$invalid && 
!formRegister.oldPassword.$pristine, 'no-errors' : formRegister.oldPassword.$valid}">
                        <input focus type="password" placeholder="Current Password" 
id="oldPassword" name="oldPassword" ng-model="oldPassword" required />
                    </label>
                    <label class="item item-input" 
ng-class="{ 'has-errors' : formRegister.userPassword.$invalid 
&& !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
                        <input focus type="password" placeholder="New Password" 
id="userPassword" name="userPassword" ng-model="userPassword" required />
                    </label>
                    <label class="item item-input" 
ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && 
!formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
                        <input focus type="password" id="confirmPassword" 
name="confirmPassword" placeholder="Confirm New Password" 
ng-model="confirmPassword" required compare-to="userPassword">
                    </label>
                    <div class="msg-block ng-invalid" ng-show="formRegister.$error">
                        <span class="msg-error ng-invalid" 
ng-show="formRegister.confirmPassword.$error.pwmatch">
                            Password doesn't match.
                        </span>
                    </div>
                    <div class="button-bar bar-balanced">
                        <a class="button" ng-click="openPasswordModal()" 
ng-disabled="formRegister.$invalid" style="font-size:25px">Change Password</a>
                    </div>
                </form>
 
            </div>
 
        </ion-content>
    </ion-modal-view>
</script>

JS

//open popup model
   $scope.openPasswordModal = function (animation) {
       $ionicModal.fromTemplateUrl('templates/changePassword.html', {
           scope: $scope,
           animation: animation
       }).then(function (modal) {
           $scope.passwordModal = modal;
           $scope.passwordModal.show();
       });
   };
   //close popup model
   $scope.closePasswordModal = function () {
       $scope.passwordModal.hide();
   };

Directive

//password compare
app.directive('compareTo', [function () {
    return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function (scope, element, attributes, ngModel) {
            var firstPassword = '#' + attributes.compareTo;
            element.on('keyup'function () {
                scope.$apply(function () {
                    var v = element.val() === $(firstPassword).val();
                    ngModel.$setValidity('pwmatch', v);
                });
            });
        }
    };
}]);