AngularJS form data to Ruby on Rails API

Question

I created a simple API with Ruby on Rails,and I'm trying to send data from a form with AngularJS. The thing is that the App is sending the post method and the backend is creating the new records, so far it's working, but it creates it with Null values.

This is the form:

<div ng-controller="postController">
    <form name="messageForm" ng-submit="submitForm()">
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="content" class="form-control" ng-model="message.content">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

This is the Angular Controller:

app.controller('postController', function($scope, $http) {
  // create a blank object to handle form data.
    $scope.message = {};
  // calling our submit function.
    $scope.submitForm = function() {

    $http({
      method  : 'POST',
      url     : 'http://localhost:3000/api/v1/messages',
      data    : $scope.message, //forms user object
      headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
     })
      .success(function(data) {
        if (data.errors) {
          // Showing errors.
          $scope.errorContent = data.errors.errorContent;
        } else {
          $scope.message = data.message;
        }
      });
    };
});

And in the RoR's API Controller, this is the Create method:

def create 
    respond_with Message.create(params[:message])
end

The only rows are:

ID which is generated automatically.
And 'content'

Daniel Batalla · Accepted Answer · 2016-02-17 19:52:40Z

2

You must assign a key to your message object in data parameter, like this:

$http({
  method  : 'POST',
  url     : 'http://localhost:3000/api/v1/messages',
  data    : { data: $scope.message },
  headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
 })
 .sucess(function(data){ ... });

And then, in your controller:

def create 
  respond_with Message.create(params[:data])
end

Hope this help :)

answered Feb 17, 2016 at 19:52

Daniel Batalla

1,2741 gold badge13 silver badges22 bronze badges

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

3 Comments

Gabriel Alejandro Over a year ago

(Part 1) Thank you for replaying! This helped, but now I'm getting this in the console: "XMLHttpRequest cannot load localhost:3000/api/v1/messages. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '127.0.0.1:59076' is therefore not allowed access. The response had HTTP status code 500."

Gabriel Alejandro Over a year ago

(Part 2) But I have this method in my Application Controller: before_filter :add_allow_credentials_headers def add_allow_credentials_headers response.headers['Access-Control-Allow-Origin'] = request.headers['Origin'] || '*' response.headers['Access-Control-Allow-Credentials'] = 'true' end

Daniel Batalla Over a year ago

@GabrielAlejandro If you still getting that error, open it in a new question to get more attention!

Collectives™ on Stack Overflow

AngularJS form data to Ruby on Rails API

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related