current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 17 down vote favorite
8

i'm a newbie to angularjs, so this might be trivial. Are there any inbuilt angular js 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.

share|improve this question

3 Answers 3

up vote 34 down vote accepted

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>
share|improve this answer
    
updated question with code.Have a look –  iJade Feb 13 '13 at 10:14
    
Updated my answer with an example. –  Anders Ekdahl Feb 13 '13 at 10:21
    
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 –  iJade Feb 13 '13 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. –  Anders Ekdahl Feb 13 '13 at 11:39
5  
$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? –  Corey Cole Jun 8 '13 at 9:30
up vote 0 down vote

Try this directive that works with ui-router

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

share|improve this answer
up vote 7 down vote

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!

share|improve this answer
1  
Nice! Thanks for this! –  OneHoopyFrood Nov 7 '14 at 22:14
1  
This is just what [my app] and many larger apps need--well done Slava! –  Ed Meacham Nov 28 '14 at 17:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.