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?
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.
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
Related
is it possible to validate an entire form instead of the individual fields of the form? I have a REST api that I would like to receive validation errors from but all the examples that I have come across are attaching a directive to individual fields instead of the form tag.
I have form split in two tabs and submit button is present on the second tab.Elements in both the tabs are present enclosed within same form tag and share same "ng-controller".Problem is I can submit the form without filling form elements in the first tab and it shows error scope object is undefined.How do I validate the form elements in this case and save the scope data on pressing submit.Any suggestions would be of great help.
With regards to your validation problem, you'll want to validate that each required field has been filled-out correctly before acting on the submit. What I would do: instead of the submit button directly calling the submit functionality, it would call a function that checks for all the necessary values on the scope, and if it works, then it calls the submit function.
With regards to saving the data, you'll either want to save it to a db or store it temporarily in a service.This is a pretty good tutorial on services: http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
I have used switch-toggle inside ng-repeat. I don't know how to set default value to ng-model when you have multiple switch-toggle in your form and on form submit you need to have all the values. I am very much new to angular world and here is the Example In this example on form load the default value for switch-toggle is shown as "OFF". And if I submit form without making any change to the switch-toggle and check in browser console you can see empty model array. And on making some changes then I get the appropriate values.
So, how can I get all the values of the switch-toggle irrespective I make changes or not. As far as my angularJS knowledge is concern I guess it is related to its model. But how to do it in this case I feel I am lost.
This i believe should be model driven. You should intialize your switchModel, something like this
$scope.switchModel = {1:false,2:true,3:false };
instead of {}
The typeahead example (http://angular-ui.github.io/bootstrap/#/typeahead) mentions it's easy to implement a back end into this autocomplete, but provides no example. What interests me in particular is finding out the currently entered string so that I can send that to the server and send back an already filtered result - I would like to do this optimization server-side and minimize my queries, I don't think returning the whole result set and just excluding non-matching items for display is feasible for an app that has over 200,000 entries in the database.
Should I, in this case, forget about typeahead altogether and implement a custom solution with a dropdown, or is there a way to do this easily?
There is a way to implement this very easily, no need to roll out your custom solution (at least not for this case!). Basically you can use any function as part of the typeaheads expression, ex.:
<input type="text" ng-model="selected" typeahead="state for state in getStates($viewValue)">
As you can see from this example the getStates($viewValue) method (defined on a scope) can be called and the $viewValue corresponds to a value entered by a user.
What is the best here is that your function can return a promise and this promise will be correctly recognized by the typeahead.
Some time ago I've written a sample plunk that shows how to use server-side calls to provide auto-complete. Check this plunk that shows autocomplete for all the cities in US (based on geobytes.com), where cities are queried live from a JSONP service:
http://plnkr.co/edit/t1neIS?p=preview
Check it out for a working example on how to do filtering on the server side (you need to type at least 3 characters to see results). Of course you are not limited to jsonp calls, you can use any method returning a promise.
Don't have the rep to comment so posting as an answer (sorry!)
If you are using a newer version of bootstrap you need to add uib- in front of typeahead (like so)
<input type="text" ng-model="selected" uib-typeahead="state for state in getStates($viewValue)">
Is there any way I can access the form elements in view like textbox or selectbox(combobox) from controller without submitting form in view?
That is impossible. The only way data gets to the server is if its submitted, be it via normal means or ajax, post or get.
I think you are looking for a way to submit the form without reloading the page, which would be ajax. You can use something like jQuery that has a nice framework to do this easily. you can use the .post()/.get() and .serialize() methods
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/
http://api.jquery.com/jQuery.get/