directive inside form is not working while moving to another page using Angular.js

Question

I have one issue here.I have a form in my app and my requirement is while user is navigating to another page without submit this form one confirmation message will display to alert user using angular.js.I am explaining my code below.

<form name="billdata" id="billdata" confirm-on-exit enctype="multipart/form-data" novalidate>
    <span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">First Name :</span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="first_name">
    <span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">Last Name :</span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="last_name">
    <div style="text-align: center; padding-top: 10px;">
        <input type="button" class="btn btn-success" ng-click="addUserData(billdata);" id="addProfileData" value="submit" />
    </div>
</form>

And i have the following code in my controller page.

dashboard.directive('confirmOnExit', function() {
    return {
            link: function($scope, elem, attrs) {
                window.onbeforeunload = function(){
                    if ($scope.billdata.$dirty) {
                        return "The form is not saved, do you want to stay on the page?";
                    }
                }
                $scope.$on('$locationChangeStart', function(event, next, current) {
                    if ($scope.billdata.$dirty) {
                        console.log('next',next,current);
                        if(!confirm("The form is not saved, do you want to stay on the page?")) {
                            event.preventDefault();
                        }else{
                            console.log('hii');
                        }
                    }
                });
            }
        };
});

Here i am getting the confirmation message while user is totally leaving the page site.But my requirement is while user is navigating to another page without submit this form the confirmation message should display.Please help me.

Have a look at this detailed explanation for what you are looking for. http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs — J-D, Oct 30 '15 at 04:43
@J-D : I have also visited this site before not clear about this. — , Oct 30 '15 at 05:09
if you want to not move out of the page if the form is pristine then you need to also have the prevent default outside of the if, since here when the form is not dirty we dont go into the condition and then location is allowed to proceed... try adding the event.preventDefault() outside of the if as well, also $dirty does not mean submitted there is the $submit attribute if you dont care about validity and $valid if you do — Jony-Y, Oct 30 '15 at 05:53
the explanation I gave you was incorrect, I didnt notice it was in the form... its just never triggered... you can do something like http://stackoverflow.com/questions/14893867/angular-js-directive-to-show-alert-for-browser-back-button-when-unsaved-data-in — Jony-Y, Oct 30 '15 at 06:38
or you can pass the form to the directive, and change the buttons to submit and then catch the submit event and do what you need to do — Jony-Y, Oct 30 '15 at 06:39
@Jony-Y : its too difficult to create plunkr .i was just following the link provided by you but thats not working. — , Oct 30 '15 at 06:53
@Jony-Y : Ok take [this plunkr link](http://plnkr.co/edit/IJcFQAEMG1KlxEAC5p8c?p=preview) and please help me to solve. — , Oct 30 '15 at 07:07

score 1 · Accepted Answer · answered Oct 30 '15 at 07:23

Ok so I created a small project with two routes. to demonstrate how to do what you wanted... this is with your pieces of code so just take from it what you need

the directive has been changed to:

.directive('confirmOnExit', function() {
return {
  require:'form',
        link: function($scope, elem, attrs,formController) {
            window.onbeforeunload = function(){
                if (formController.$dirty) {
                    return "The form is not saved, do you want to stay on the page?";
                }
            }
               $scope.$on('$locationChangeStart', function (event, next, current) {
            if (formController.$dirty) {
                if (!confirm("The form is dirty, do you want to stay on the page?")) {
                    event.preventDefault();
                }
            }
        });
          }
    };

});

not that I added the require form to make it generic to all forms you want to use.

this will only consider $dirty so if you want also $invalid add the condition and $submitted as well

**HERE IS A ** PLUNKER with the working example...

@ Jony-Y : it looks good.Can you please tell me what is `formController` here ? — , Oct 30 '15 at 07:31
sure, when you add the require to the directive in this case the 'form', angular actually passes the form into the directive allowing you to access it... so you can use the form controller functions such as $dirty or $setDirty() and so on, you can use require for many purposes, if you want more details check out https://docs.angularjs.org/guide/directive - and the require section — Jony-Y, Oct 30 '15 at 07:34

directive inside form is not working while moving to another page using Angular.js

1 Answers1