rexhxiao / angular-dirtyform-check

Dirty form (i.e., unsaved changes) checker for AngularJS

angular-dirtyform-check

Prompt user on navigation if there are unsaved form changes. Works with ngRoute and ui-router.

See it

Here

Get it

from npm

npm install --save angular-dirtyform-check

from bower

bower install --save angular-dirtyform-check

and add it to your html file

<script src="/dist/angular-dirtyform-check.js"></script>

Use it

Add angular-dirtyform-check as dependency

var module = angular.module('yourApp', [
    'angularDirtyformCheck'
]);

and make any <form> being watched for unsaved changes on navigation by adding the dirty-check directive

<form dirty-check class="well">
    <div class="form-group">
        <label for="magicnumber">Magic number</label>
        <input type="number" class="form-control" id="magicnumber" placeholder="Magic number" ng-model="model.magicnumber">
    </div>
    <a class="btn btn-default" href="#form1/testParam">Go to form 1 with params</a>
</form>

Customize it

By default a simple confirm(dirtyMsg) is shown to the user asking Changes you made may not be saved. Leave anyway?.

You can change the message with dirtyCheckServiceProvider.setDirtyMessage() like

 module.config(config);

config.$inject = ['dirtyCheckServiceProvider'];
function config(dirtyCheckServiceProvider) {
    dirtyCheckServiceProvider.setDirtyMessage('Wanna leave?');
}

or change the entire dialog being shown providing your own dirtyCheckDialog service that offers a show() function returning a thenable object. If the promise is fulfilled the navigation is executed, otherwise it's not and the user stays where he is.

Example using ngDialog (openConfirm() returns a promise)

var module = angular.module('yourApp', [
    'angularDirtyformCheck',
    'ngDialog'
]);

module.service('dirtyCheckDialog', dirtyCheckDialog);

dirtyCheckDialog.$inject = ['ngDialog'];
function dirtyCheckDialog(ngDialog) {
    return {
        show: function () {
            return ngDialog.openConfirm({
                template: 'dialog.tpl.html'
            });
        }
    };
}

or $mdDialog from Angular Material ($mdDialog.show() returns a promise)

var module = angular.module('yourApp', [
    'angularDirtyformCheck',
    'ngMaterial'
]);

module.service('dirtyCheckDialog', dirtyCheckDialog);

dirtyCheckDialog.$inject = ['$mdDialog'];
function dirtyCheckDialog($mdDialog) {
    return {
        show: function () {
            return $mdDialog.show({
                   templateUrl: 'dialog.tpl.html',
                   controller: ['$scope', '$mdDialog', function($scope, $mdDialog) {
                       $scope.stay = function () {
                           $mdDialog.cancel();
                       };
                       $scope.leave = function () {
                           $mdDialog.hide();
                       };
                   }]
            });
        }
    };
}

Build it

Get a clone and run

npm install
gulp build

The built file is located under ./dist.

To run the demo locally run

gulp demo

and navigate your browser to http://localhost:8080/dev_index.html. Source changes will trigger a refresh.