angular-dirtyform-check

angular-dirtyform-check

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

See it

Here (using ngRoute) or here (using ui.router).

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 ngRoute-demo | gulp ui.router-demo

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