angular submitting only form data not whole model

Question

I'm submitting form data to my API but my model contains my whole object. I should really only submit the updates, correct?

So,

my item is retrieved by Id, which I don't need to show to the user (hidden field).
I'll show the user the title of item so they know what they're editing, but I won't make it editable (read-only).
I'll expose description so the user can edit it and save.

(Imagine a larger form - a half dozen more read-only fields and a half dozen more editable fields.)

Correct me if I'm wrong but, when sending to my API, I should not be sending the entire item object. The db already has title, why put it in the payload if its just going to be thrown away?

So, I should really only be sending the values of the editable fields.

I'm trying to figure out the proper way of separating the model from the form data so I submit the latter, not the former. If this is not best practice, please correct me.

Controller:

.controller('editItemController', ['$stateParams', 
function($stateParams) {
    var vm = this;

        vm.getItem = function () {
            $http.get('/api/Items/' + $stateParams.id).then(function (response) {
                vm.item = response.data;
            });
        };
        vm.saveChanges = function () {
            vm.submitted = true;

            if (vm.detailsForm.$valid) {

                $http.put('/api/Items/' + $stateParams.id, vm.item).then(function (response) {

                });
            }

        };

    vm.getItem();
}

View:

<form name="itemVm.detailsForm" ng-controllerAs="itemVm">
        <input type="hidden" name="Id" ng-model="itemVm.item.Id" />

        <div class="form-group">
            <label for="title" class="control-label col-xs-3">Title:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" readonly="readonly" id="title" value="{{ itemVm.item.Title }}">
            </div>
        </div>

        <div class="form-group">
            <label for="description" class="control-label col-xs-3">Description:</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" name="description" ng-model="itemVm.item.Description" required>
            </div>
        </div>
        <button ng-click="itemVm.saveChanges()">Save Changes</button>
    </form>

Is it possible it is as simple submitting vm.detailsForm, rather than vm.Item? And to eliminate certain inputs, just don't give them a name attr? It looks like there's more to it than that. The payload parameters contain objects, not values. — DaveC426913, Jun 16 '16 at 15:40

score 0 · Answer 1 · edited May 23 '17 at 10:29

For a standard REST API, you should be sending the entire object. The entire idea behind REST is that you transfer representations of the state of an object, hence representational state transfer. As such, it should be a complete representation, not a portion.

There are multiple ways to circumvent this if you'd really like, and most have to do with the back end, not the front end.

Either create an ad hoc endpoint to take in the one parameter and update the persistent object accordingly. (Not recommended).

If you want to send partial data (which I think is a good idea some times depending on the size of the object), you should handle that on the back end accordingly.

See here.

angular submitting only form data not whole model

1 Answers1