Search code examples
angularjslocalforage

LocalForage + Angular - how to automatically save entire form object on change

I have a scope variable named productForm and I would like to save it whenever a change occurs to it's underlying models (i.e. productForm.designer)

I would like the key to be the id of the product the form is associated with, rather than on a per input basis. I tried doing something like this, with no luck:

intakeApp.controller("MageProductCtrl", ["$scope", "$http", "$localForage", function($scope, $http, $localForage) {
  $localForage.bind($scope, 'someProductId');
  ...
}]);

My view looks something like this

<form name="productForm" ng-submit="submit(productForm.$valid)" novalidate>
  <input type="text" class="primary-text" name="designer" ng-model="product.designer" value="{{product.designer}}" required>
  ...
</form>

When I add local-forage binding to my input, it saves the specific input with the key of product.designer BUT, I would rather if the whole form would be saved as such:

key: someProductId, value: {product.designer: "foo", product.name: "bar"}

Any ideas what I'm doing wrong?

Solution

  • I was facing the same issue and toke a look of the binding method https://github.com/ocombe/angular-localForage/blob/master/dist/angular-localForage.js#L379

    You can see that it does only bind when the object is already in the database or when you provide a default value. I solved the issue like this:

    $localForage.bind($scope, { key: 'user', defaultValue: {}})