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
– callmekatootie, Commented Jul 28, 2015 at 5: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
– Ken, Commented Jul 28, 2015 at 6:05
where is your controller definition? are you really defining Controller as contactForm and then naming the form contactForm as well? — Claies
– Claies, Commented Jul 28, 2015 at 7:51
@Claies I can change the form name to myForm if that will be more clear. — Ken
– Ken, Commented Jul 28, 2015 at 7: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
– Claies, Commented Jul 28, 2015 at 8:11

Claies · Accepted Answer · 2015-07-28 08:59:45Z

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);
}

Collectives™ on Stack Overflow

Persisting form data when user navigates away from page in Angular

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related