Detect unsaved data using angularjs

Asked 13/2, 2013 at 9:5 Answered 20/4, 2015 at 16:58

Solved javascript angularjs angularjs-directive

I'm a newbie to AngularJs, so this might be trivial. Are there any inbuilt AngularJs directive to detect unsaved data in a form. If not then how to go about writing one. Any pointers would be appreciated.

html code is

<input type="text" runat="server" />

And my angular js controller code is

    function MyCtrl1($scope) {
      // code to do stuff
}MyCtrl1.$inject = ['$scope'];

I am trying to write a directive to detect unsaved data, and I'm guessing its to be written in the above controller.Correct me if wrong.

Akimbo answered 13/2, 2013 at 9:5 Comment(0)

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>

Holdall answered 13/2, 2013 at 9:33 Comment(6)

Dat works fine.I know its another question but is it possible to notify user of unsaved changes when he tries to close the browser or navigate to some other page – Akimbo 13/2, 2013 at 10:36

Sure, that's absolutely possible. You'd do it with a directive on the form, but like you said, that should be in another question here. – Holdall 13/2, 2013 at 11:39

posted that as another question.Have a look. #14853302 – Akimbo 13/2, 2013 at 11:45

It seems that $setPristine has been removed in the latest version of Angular. – Along 27/4, 2013 at 22:4

$dirty/$pristine don't seem to work as expected, at least in 1.0.7. If I have a simple form and change a value, $dirty is set to true. However, if I change the value back to the initial value, $dirty remains true. Coming from Knockout, there's a way to specify how to tell if your model is dirty (the default is it converts the entire model to JSON and does a string compare). Is that possible in Angular? – Boride 8/6, 2013 at 9:30

$setPrestine still exists in angular inside NgModelController – Poundfoolish 10/9, 2017 at 9:35

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!

Serilda answered 13/10, 2014 at 11:15 Comment(5)

I"ve tried this one. But for me modified yes or no, doesn't change at all. I am using oclazyload to load the modules. I am so frustrated. but wonderful plugin. Do you have any step by step procedure to implement? – Trahern 16/2, 2016 at 10:42

Modified always false for me :-( – Trahern 16/2, 2016 at 10:44

This one is really interesting: "If form is dirty it still doesn't mean that it has changed data." Would love to know what that means :) – Pierson 2/2, 2017 at 15:37

@Pierson you could enter "ABC" to the input field and then erase the content. Angular will treat this input as dirty, but underlying data is still the same, i.e. empty string. So it's dirty, but not modified. – Serilda 2/2, 2017 at 16:25

it would make more sense if there was another attribute, changed, which does this by default. Sadly, not even Angular 2 or 4.0 includes such functionality. – Venegas 27/3, 2017 at 6:28

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.

Nonappearance answered 20/4, 2015 at 16:58 Comment(3)

This is excellent, thank you! ps: sometimes Angular may add $$HashKey properties to the model; using angular.toJson($scope.data) instead of 'JSON.stringify($scope.data)` will mean that angular will take care of removing any tracking variables it's using to track the states. – Advisement 25/8, 2015 at 12:49

This is exactly what I was looking for - thanks! Following up on @Advisement 's comment, I also found it much more reliable to use angular.toJson($scope.data) – Stereogram 6/7, 2016 at 7:34

Dont use listeners in contollers. Check up any bestpractise – Bourke 22/9, 2016 at 14:6

Try this directive that works with ui-router

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

Batiste answered 15/4, 2014 at 19:3 Comment(1)

I've tried your suggestion. But I got a problem. The pristine is not updated once the form is changed. So if the user enter some texts then somehow clear it, the page still detect unsaved data. – Luisaluise 28/5, 2015 at 5:19

Recommended topics

Hot tags