How to Auto-Save your model in Angular.js using $watch and a Debounce function.

October 30, 2013

<h3 id="the-problem">The Problem</h3> Currently, I’m working on an Angular app that is very form-centric. Fields and fields and more fields. I want to make the form-filling process as quick and painless as possible, so I’m trying to implement auto-save. <hr> <h3 id="update-march-19th-2014">Update (March 19th, 2014)</h3> I’ve done quite a bit more auto-saving on my current project and I’ve updated my post with some slightly better methods. It also now has a solution for when you are trying to auto-save multiple items in an array. I combined a lot of the info below into <a href="http://jsbin.com/xohugepe/1/edit?html,js,output">this live example</a>. <hr> <h3 id="first-attempt">First Attempt</h3> My first attempt at an auto-save solution (while still being very new to Angular) was a directive that, based on the type of element, waited for either a <code>change</code> or <code>blur</code> event to occur and communicated to the controller (via a service) that it was time to save the model. <div class="highlight"><pre class="highlight html"><code><input type='text' ng-model='myModel.field1' auto-save /> <select ng-model='myModel.field2' auto-save >...</select> </code></pre></div> A simpler version of this method might look something like this: <div class="highlight"><pre class="highlight html"><code><input type='text' ng-model='myModel.field1' ng-blur='save()' /> <select ng-model='myModel.field2' ng-change='save()' >...</select> </code></pre></div> There are a few problems with this method: <ol> <li>I have to add these extra attributes to each and every input field. If I happen to forget one, my user may lose their data since there aren’t any explicit ‘Save’ buttons.</li> <li>It won’t auto-save until the user changes the focus of the field. This is particularly problematic with <code><textarea></code> fields, where the user may type for long periods of time before changing focus.</li> <li>I’d much rather my view not know anything about when my model is or isn’t being saved to the server.</li> </ol> <h3 id="new-solution-watch-and-debounce">New Solution: $watch and debounce</h3> My new solution uses the <code>$watch</code> method that Angular provides for watching for changes to scope variables. I don’t want to make requests to the server with every keystroke, so I’ll use a simple debounce function (using Angular’s <code>$timeout</code> service) to limit my requests to happening every few seconds. To implement this solution, there is nothing to add to your view. But in the controller, you’ll need to inject <code>$timeout</code> and write a couple <code>$watch</code> statement. I added a watch statement for each individual attribute of the model, but you could also do a deep watch of the entire model. This is slightly more expensive performance-wise. <div class="highlight"><pre class="highlight html"><code><input type='text' ng-model='myModel.field1' /> <select ng-model='myModel.field2'>...</select> </code></pre></div><div class="highlight"><pre class="highlight javascript"><code>app.controller('myCtrl', function($scope, $timeout) { $scope.myModel = {}; var timeout = null; var saveUpdates = function() { // .... save data to server }; var debounceSaveUpdates = function(newVal, oldVal) { if (newVal != oldVal) { if (timeout) { $timeout.cancel(timeout) } timeout = $timeout(saveUpdates, 1000); // 1000 = 1 second } }; $scope.$watch('myModel.field1', debounceSaveUpdates) $scope.$watch('myModel.field2', debounceSaveUpdates) }); </code></pre></div> <h3 id="potential-gotcha-1-validation">Potential Gotcha #1: Validation</h3> Angular.js doesn’t provide any sort of model validation (or any model-related code at all) and instead recommends that you validate the form using a combination of HTML5 validation and a few built in directives. Angular includes a way to access our form and its <code>$valid</code> attribute. First, we need to wrap our fields in a <code><form></code> tag with a <code>name</code> attribute and also make our fields required. <div class="highlight"><pre class="highlight html"><code><form name='myForm'> <input type='text' ng-model='myModel.field1' required /> <select ng-model='myModel.field2' required>...</select> </form> </code></pre></div> Next, we need to update our controller a bit to check the validity of our form. <div class="highlight"><pre class="highlight javascript"><code> var saveUpdates = function() { if ($scope.myForm.$valid) { // .... save data to server } }; </code></pre></div> If you need more complex validators, you’ll need to create custom directives that make use of the <a href="http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#methods_$setvalidity">$setValidity</a> method. <h3 id="potential-gotcha-2-preventing-double-saves-on-create">Potential Gotcha #2: Preventing Double-Saves on Create</h3> One problem I ran into was that when I auto-saved a brand new object was that the object was replaced with the version from the server, causing the <code>$watch</code> function to be triggered again. The result was that my object was immediately saved a second time, unnecessarily. The solution to this is fairly simple: just set a <code>saveInProgress</code> flag so that it never starts another save before the previous one finishes. This will also prevent a double-save caused by a save call that is slower than the timeout on your debounce function. It might look something like this: <div class="highlight"><pre class="highlight javascript"><code>var saveInProgress = false; var saveFinished = function() { saveInProgress = false; }; var saveUpdates = function() { if ($scope.myForm.$valid) { saveInProgress = true; saveFunction().finally(saveFinished); // The finally method runs regarless of whether the save was successful or not. } }; </code></pre></div> A related and much harder problem is how to resolve changes to the model that happen during the round-trip of the save. I recently <a href="https://twitter.com/realtarnschaf/status/407489612227940352">had a discussion on Twitter about this</a>, but I think it really comes down to designing your UX to discourage or prevent your user from making changes to the model while still waiting on that first <code>POST</code> creation request. If you also replace your model with the server’s version on subsequent updates (which is generally not recommended), the problem gets a little trickier. <h3 id="potential-gotcha-3-auto-saving-individual-items-in-an-array">Potential Gotcha #3: Auto-Saving individual items in an array</h3> Another issue that you’ll often run into is when you have an array of objects, perhaps in a grid interface. While angular does provide a <code>$watchCollection</code> method, it only does a shallow watch on the array as a whole and won’t tell you which item was changed. Instead, a better solution is to wrap the fields of each individual item inside a child controller or directive. <a href="http://jsbin.com/xohugepe/1/edit?html,js,output">Here is a live example of how that would work.</a> And that’s it! This is an extremely simple example, so if you have any questions or comments, give me a shout out <a href="http://twitter.com/adam_albrecht">on Twitter</a>.

#angularjs #javascript