Sutikshan Dubey Sutikshan Dubey - 1 year ago 119
AngularJS Question

Prompt confirm before Leaving edited html form

If user tries to leave unsaved edited form, a message box pop-up

"This page is asking you to confirm that you want to leave - data you have entered may not be saved.
Leave Page and Stay on Page"

Can we invoke this confirmation box through some special function of browser? I want to implement it in AngularJS application

enter image description here

Answer Source

Warlock's answer is partly right, but in doing so, you'd break testability.

In Angular, you'd want to use $window, and you'll want to watch $dirty on your form. You'll need to have a named form, notice name="myForm" below. Then you can $watch $dirty on the form in your $scope:

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';
  var win = $window;
  $scope.$watch('myForm.$dirty', function(value) {
    if(value) {
      win.onbeforeunload = function(){
        return 'Your message here';
      };
    }
  });
});

HTML

<form name="myForm">
  Name: <input type="text" ng-model="name"/>
</form>

Here's a plunk to demonstrate: http://plnkr.co/edit/3NHpU1