Persisting form data when user navigates away from page in Angular

Question

I would like to persist the data entered in a form so that the information entered will still display in the respective fields if the user clicks the back button and then subsequently returns to the form. I've tried using this Stack Overflow answer as a model, but am not having any luck: https://stackoverflow.com/a/16806510/640508

I'm using the Controller As syntax.

Here's my adapted code:

Controller:

angular.module('myApp')
   .controller('ContactFormCtrl', ['formMemory', '$http', function (formMemory, $http) {
var contactForm = this;
contactForm.contact=formMemory;
formMemory.set();
formMemory.get();
// . . . 
}]);

Service:

angular.module('formMemory.fact', [])
    .factory('formMemory', function () {

    var contact = {};

    return {
      get: function () {
        return contact;
      },
      set: function (value) {
        contact = value;
      },
      reset: function () {
        contact = {};
      }
    };

HTML:

<h1><small>ContactInformation</small></h1>
<form name="myForm" novalidate >

   <div class="row">
    <div class="col-sm-4 form-group">
           <label class="control-label" for="first-name">First Name</label>
           <input type="text" id="first-name" name="firstName" ng-model="contactForm.contact.firstName"
           placeholder="First Name" class="form-control">
     </div>
// . . .

app.js:

angular.module('myApp', [
'formMemory.fact',
  //. . . 
]);

The mentioned link has all the answers that you need. It is well commented too. What part of it did you not understand? — callmekatootie, Jul 28 '15 at 05:59
@callmekatootie The example made sense to me. And, you're right, it's a great post. But when I tried to implement it and adopt it, it didn't work. That's why I posted the question here. — Ken, Jul 28 '15 at 06:05
where is your controller definition? are you really defining `Controller as contactForm` and then naming the form `contactForm` as well? — Claies, Jul 28 '15 at 07:51
@Claies I can change the form name to myForm if that will be more clear. — Ken, Jul 28 '15 at 07:56
in this case, it might be best to not try to provide a contrived example; it still looks like there are errors in this sample you provided, and it's not obvious if those are what is causing your issue. for example, you don't appear to be injecting your factory module into the app module. — Claies, Jul 28 '15 at 08:11
@Claies I appreciate the feedback. I'm injecting the factory into myApp, which is then used in the controller. I'm happy to include more code if you think it will be helpful. I was just trying not to clutter the post with too much code. — Ken, Jul 28 '15 at 08:35
right now, it's hard to build a reproducible example of your issue. with a bit more code, it might be a bit clearer and easier to reproduce, so yes. — Claies, Jul 28 '15 at 08:36

score 0 · Accepted Answer · answered Jul 28 '15 at 08:59

The factory formMemory returns an anonymous object, with 3 functions attached. You aren't using the correct syntax for accessing these functions.

To access the saved data, you would want to set your controller variable to the return value of the get() function, like so:

contactForm.contact = formMemory.get();

and to save the data if you navigate away, you should be passing the contact in as a parameter to the set(value); most likely, you would do this in the $routeChangeStart.

$scope.$on('$routeChangeStart', function() {
    //we are leaving the page, so let's save any data we have
    formMemory.set(contactForm.contact);
}

Persisting form data when user navigates away from page in Angular

1 Answers1