JarCastingangular-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.