Angular form - send only changed fields

Question

I'm creating a web client that works with a settings web API with angular. There are a lot of settings and they are all optional. If I send a setting, it should be saved. Settings that are not sent should not change.

The requirement is to have one Save Changes button for all the settings.

I wonder if there is some way in Angular to implement this.

I thought about not using HTML form and collecting the data and creating an ajax request by myself but then I will lose the validation mechanism (that is working well with Angular-UI validate).

I thought about splitting the form into little forms and submiting only the forms where ng-dirty is not false, but this can cause a partial save if some requests will fail (and this is against the requirement).

Any idea?

Answer 1

You can check if the form or any named field is modified before submission. If the form has a name and your inputs have names like:

<form name="myForm">
   <input name="input1">
</form>

In the controller you will have access to the object $scope.myForm and $scope.myForm.input1, and these objects will have a $dirty property which is true if the original value was modified by the user.

Answer 2

In the Angular documentation there is an example that covers ng-copy to implement a reset function.

http://docs.angularjs.org/cookbook/advancedform

During submit you could compare your starting model(master copy) to the changed/submitted object (changed copy) and only submit the changed items (or just delete those that are the same/unchanged).

Diff the copy and master with http://blog.vjeux.com/2011/javascript/object-difference.html This needs extra work to handle arrays. Or convert to JSON and diff the JSON https://github.com/benjamine/JsonDiffPatch