9

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?

Improve this question

2 Answers 2

Reset to default
18

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

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

Improve this answer

4 Comments

this is not what I was looking for, but I guess this means that angular doesn't offer this functionality out of the box. thank you.
That's reinventing the wheel - angular FormController and ngModel already perform dirty checks, add classes and store this info in $scope. See answer from r4w87173
@ArturBodera What if I want to automate this process? It seems like I need to keep track of input names and model attributes. (I'm actually asking).
You could just forEach() through them, sounds trivial.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.