Angular POST JSON structure

Question

When I submit an empty form from my angular app, it sends out the following JSON:

{foo: {}}

This leads to a 500 error (instead of 422) from my server, as it expects the following structure:

{foo: {bar: ""}}

How can I make sure that the "bar" key is always included in my JSON even if the value is empty?

Here is what my controller looks like currently:

$scope.baz = {};
$scope.create = function() {
    var error, success;
    $scope.errors = {};
    success = function() {
      $scope.baz = {};
    };    
    error = function(result) {
        angular.forEach(result.data.errors, function(errors, field) {
            $scope.form[field].$setValidity('server', false);
            $scope.errors[field] = errors.join(', ');
        });    
    };

    Foo.save({ foo: { bar: $scope.baz.bar }}).$promise.then(success, error);

};

Answer 1

I think when you are passing undefined object prop in the save request it gets ignored or remove while sending request to server. You could make that value as an empty valued string to make sure it assigned with some value and shouldn't get removed from the request object. Try changing your code to below.

Foo.save({ foo: { bar: $scope.baz.bar|| "" }})