angular-auto-save-form

Description

Angular auto save form changed inputs.
The directive will call the callback function with a parameter object containing only the inputs that are $dirty.

Demo

Install with Bower

  bower install angular-auto-save-form --save

Install with npm

  npm install angular-auto-save-form --save

Then add a <script> to your index.html:

  <link rel="stylesheet" href="bower_components/angular-auto-save-form/dist/auto-save-form.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/lodash/lodash.js"></script>
  <script src="bower_components/angular-auto-save-form/dist/auto-save-form.js"></script>

Include 'angular-auto-save-form' as a dependency of your module like this:

  var module = angular.module("example", ["angular-auto-save-form"]);

Usage

Default usage:

Directive requires that form and input elements to have [name] attribute

  <ng-form name="myForm" auto-save-form="callback(controls)"> 
    <input ng-model="user.name" name="name"/>
    <input ng-model="user.email" name="email"/>
  </ng-form>

Which expects a scope setup like the following:

  $scope.user = { name: "Jon Doe", email: "[email protected]" };
  
  //changing input user.name the callback function will be called with parameter object
  $scope.callback = function(controls){ // controls = {'name': 'Jon Doe'}
      return $http.post('saveDataUrl', controls);
  };

For radio inputs or if you want to group inputs on the same property use the [auto-save-form-property] attribute
on one of the inputs and prefix the input name with a group name

  <ng-form name="myForm" auto-save-form="callback(controls)"> 
    <input type="radio" ng-model="user.gender" name="inputGroupName.gender1" 
      auto-save-form-property="inputGroupName.gender" value="male"/>Male
    <input type="radio" ng-model="user.gender" name="inputGroupName.gender2" value="female"/>Female
  </ng-form>

The object will look like this:

  //{'gender': 'male'}

Optional attributes:

If you want to change locally debounce timer

  auto-save-form-debounce="number" default:500

If you want to change the debounce at input level use [ng-model-options] directive

Loading spinner in top right corner of the form enabled by default if callback promise returns a promise.

  auto-save-form-spinner="boolean"  default:true

  auto-save-form-spinner-position="string"  default:'top right'

Possible combinations: 'top right', 'top left', 'bottom left', 'bottom right'.
It is possible to add your own class without your desired position.
Example:

[auto-save-form] .spinner.my-class {
    top: 50%;
    left: 50%;
  }

  auto-save-form-spinner-position="my-class"

The directive supports nested objects like:

 user = {
  name: 'Jon Doe',
  country: {
    name: 'French',
    city: 'Paris'
  }
 }

  <input ng-model="user.country.name" name="country.name"/>

//callback object
 {
  country: {
    name: 'French'
  }
 }

Alternatively, disable auto save usage:

Warning: Mode false works only with form tag see this issue

  <form name="myForm" auto-save-form="callback(controls, $event)" auto-save-form-mode="boolean"> 
    <input ng-model="username" name="user"/>
  </form>

Which expects a scope setup like the following:

  $scope.username = "Jon Doe";
  
  $scope.callback = function(controls, $event){ // controls = {'user': 'Jon Doe'}, $event={formSubmitEvent}
      $http.post('saveDataUrl', controls);
  };

Optional attribute:

It is optional if the property is set to false globally

  auto-save-form-mode="boolean"

Trigger form submission, useful when the button is outside of the form

  $scope.autoSaveFormSubmit($event);

Global configuration

In config phase add autoSaveFormProvider

  autoSaveFormProvider.setDebounce(500); //change globaly default debounce timer
  autoSaveFormProvider.setAutoSaveMode(true); //change globaly default auto save mode
  autoSaveFormProvider.setSpinner(true); //change globaly default spinner
  autoSaveFormProvider.setSpinnerPosition('top right'); //change globaly default position of the spinner

License

The MIT License

Copyright (c) 2017 Tiberiu Zuld