Angular auto save form changed inputs

Usage no npm install needed!

<script type="module">
  import angularAutoSaveForm from '';



npm version dependencies Status devDependencies Status downloads


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


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"]);


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="" name="name"/>
    <input ng-model="" name="email"/>

Which expects a scope setup like the following:

  $scope.user = { name: "Jon Doe", email: "" };
  //changing input the callback function will be called with parameter object
  $scope.callback = function(controls){ // controls = {'name': 'Jon Doe'}
      return $'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

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.

[auto-save-form] {
    top: 50%;
    left: 50%;
The directive supports nested objects like:
 user = {
  name: 'Jon Doe',
  country: {
    name: 'French',
    city: 'Paris'
  <input ng-model="" 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"/>

Which expects a scope setup like the following:

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

Optional attribute:

It is optional if the property is set to false globally


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


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


The MIT License

Copyright (c) 2017 Tiberiu Zuld