What is the best way to submit updated data from an Angular form?

Question

What is the best way to submit updated data from an Angular form?

Currently, I have a situation where multiple forms are connected to a backend service for storing data.

My query is whether there exists a typical angular method to identify which properties of the model have been altered and only send those in the POST request. As of now, all data is being sent even if no changes have been made.

javascript angularjs angular-resource

Answer 1

Answer №1

When considering the question at hand, there are two potential scenarios to address.

If a user fills out the fields and clicks on the SAVE button, a PATCH request will be sent to save/update the values.
As the user makes changes to the values, a request must be triggered.

Regarding the first scenario:

To keep track of any changes made, it is suggested to maintain a hashmap. Utilize the ng-modal directive for all user input fields. Let's take, for example, two input fields: username and password.

<input type="text" ng-modal="username" />
<input type="password" ng-modal="password" />

In your controller:

$scope.userInfo = {
  user: $scope.username,
  pass: $scope.password
};

Any changes will automatically reflect in your views and models through two-way binding.

Now, you can compare the old and new values to determine which ones to send as needed.

For the second scenario:

Utilize Angular's watchCollection function.

scope.$watchCollection('[username, password]', function () {
  // initiate a request
});

EDIT

It is possible to use a debounce method for the second approach.

// Returns a function that, when continuously invoked, won't trigger repeatedly unless specified time has passed.
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    var last = _.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

Source: https://github.com/jashkenas/underscore/blob/master/underscore.js

Answer 2

When considering the question at hand, there are two potential scenarios to address.

If a user fills out the fields and clicks on the SAVE button, a PATCH request will be sent to save/update the values.
As the user makes changes to the values, a request must be triggered.

Regarding the first scenario:

To keep track of any changes made, it is suggested to maintain a hashmap. Utilize the ng-modal directive for all user input fields. Let's take, for example, two input fields: username and password.

<input type="text" ng-modal="username" />
<input type="password" ng-modal="password" />

In your controller:

$scope.userInfo = {
  user: $scope.username,
  pass: $scope.password
};

Any changes will automatically reflect in your views and models through two-way binding.

Now, you can compare the old and new values to determine which ones to send as needed.

For the second scenario:

Utilize Angular's watchCollection function.

scope.$watchCollection('[username, password]', function () {
  // initiate a request
});

EDIT

It is possible to use a debounce method for the second approach.

// Returns a function that, when continuously invoked, won't trigger repeatedly unless specified time has passed.
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
    var last = _.now() - timestamp;

    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
};

Source: https://github.com/jashkenas/underscore/blob/master/underscore.js

Answer 3

Answer №2

There isn't a one-size-fits-all method for this. Here's another approach that doesn't involve using watchers. By passing 'form' as an argument in the update function, you can identify which controls have been modified.

Check out this example on Plunker

.controller('ExampleController', ['$scope', function($scope) {
  $scope.user = {}
  var formFields = ['firstName', 'lastName'];

  $scope.update = function(form, user) {
    $scope.updatedFields = {};
    angular.forEach(formFields, function(field) {
      if (form[field].$dirty) {
        $scope.updatedFields[field] = $scope.user[field];
        // Reset field to pristine state temporarily (demo purpose only)
        form[field].$dirty = false;
      }
    });
  };
}]);

You can use the same string for both input name and model.

 <input type="text" ng-model="user.firstName" name="firstName"/>

Answer 4

There isn't a one-size-fits-all method for this. Here's another approach that doesn't involve using watchers. By passing 'form' as an argument in the update function, you can identify which controls have been modified.

Check out this example on Plunker

.controller('ExampleController', ['$scope', function($scope) {
  $scope.user = {}
  var formFields = ['firstName', 'lastName'];

  $scope.update = function(form, user) {
    $scope.updatedFields = {};
    angular.forEach(formFields, function(field) {
      if (form[field].$dirty) {
        $scope.updatedFields[field] = $scope.user[field];
        // Reset field to pristine state temporarily (demo purpose only)
        form[field].$dirty = false;
      }
    });
  };
}]);

You can use the same string for both input name and model.

 <input type="text" ng-model="user.firstName" name="firstName"/>

What is the best way to submit updated data from an Angular form?

Answer №1

Answer №2

Similar questions

How important is it to maintain synchronization with $inject?

Learn how to import MarkerClusterer from the React Google Maps library without using the require method

How to dynamically populate a select option with data from a database in CodeIgniter 3 and automatically display the result in a text

Unable to successfully download npm packages - encountered an error running `[email protected] install: `node-pre-gyp install --fallback-to-build` on Ubuntu 18.04 system

Resetting values in Javascript and JQuery when clicking a button

Displaying a loading spinner using JQuery while content is being loaded into a div

Using an xmlhttprequest to retrieve a PDF file functions properly in synchronous mode, but encounters issues in

Steps to handle the change event of a p:inputText element

What could be causing the Universal Code for Disqus to not function properly?

What is the best way to customize material components using styled components?

A guide on incorporating user input and output in Javascript using React and Material UI

What is causing the loss of data when attempting to access an array field within an object?

How can I extract the value from the object returned by an AJAX call?

Localization for Timeago JS Plugin

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

Leveraging Javascript to generate universal HTML content for various Javascript files

Convert a relative path to an absolute path using the file:// protocol

Imagine a complex JSON structure with multiple levels of nesting

Transform jQuery code to its equivalent in vanilla JavaScript

How to extract column name from query result set using JavaScript in Snowflake database?