Detect unsaved data using angularjs

Solution 1:

AngularJS sets the CSS classes ng-pristine and ng-dirty on any input field you've used ng-model on, and your FormController has the properties $pristine and $dirty which you can check to see if the form is dirty or not. So yes, it's possible.

Could you provide some code that shows what you're trying to do? That would make it easier to help you.

EDIT

Here's a simple example of how to detect a pristine/dirty state, and how to revert to a pristine state:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    function Ctrl($scope) {
        var initial = {text: 'initial value'};
        $scope.myModel = angular.copy(initial);
        $scope.revert = function() {
            $scope.myModel = angular.copy(initial);
            $scope.myForm.$setPristine();
        }
    }
    </script>
</head>
<body>
    <form name="myForm" ng-controller="Ctrl">
        myModel.text: <input name="input" ng-model="myModel.text">
        <p>myModel.text = {{myModel.text}}</p>
        <p>$pristine = {{myForm.$pristine}}</p>
        <p>$dirty = {{myForm.$dirty}}</p>
        <button ng-click="revert()">Set pristine</button>
    </form>
</body>
</html>

Solution 2:

Monitoring pristine/dirty state is a good place to start, but if you want to provide user with the best possible usability, you will have to compare current form data with initial form data to detect any changes. If form is dirty it still doesn't mean that it has changed data.

I've created a very small and useful module to solve this exact problem. With it you can keep your controller code as simple as possible. It adds modified property to every model and even form controller automatically and you can reset entire form by just calling a provided reset() method, so you can concentrate on your application's business logic instead of detecting changes manually.

Please see the Demo.

You can find a distribution package as well as a source code here: https://github.com/betsol/angular-input-modified (it's also available via Bower)

If you will need any help with using this library - you can contact me personally. I will be glad to help. Cheers!

Solution 3:

This is what I did in my Controller.

When I get the form data for modification, first I save its string representation to a scope variable like this:

$scope.originalData = JSON.stringify($scope.data);

Then I create a state change listener:

 var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if ($scope.originalData !== JSON.stringify($scope.data)) {
        //Show alert and prevent state change
    } else {
        //DO NOTHING THERE IS NO CHANGES IN THE FORM
    }
});

Then I clear the listener on scope destroy:

$scope.$on('$destroy', function () {
    window.onbeforeunload = null;
    $locationChangeStartUnbind();
});

Hope this helps.

Solution 4:

Try this directive that works with ui-router

https://github.com/facultymatt/angular-unsavedChanges

Detect unsaved data using angularjs

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts