Angular and Rails not able to create a user with the data sent

I have a Rails 4 api with devise gem with an angular frontend. When i send a user json object the post parameters are sent but rails doesn't seem to like the format:

The Json object sent from the angular to the rails api is:

Resource {first_name: "test first", last_name: "test last", email: "test@test.com", password: "testpass", password_confirmation: "testpass"}

but the data is received by rails as:

 Parameters: Parameters: {"first_name"=>"test first", "last_name"=>"test last", "email"=>"test@test.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "user"=>{"email"=>"test@test.com", "first_name"=>"test first", "last_name"=>"test last"}}

and fails on the validation: ["Password can't be blank"]. Which shows it expects the user object format, but why isn't the password and password confirmation being added here?

I'm not sure whether i'm doing something wrong with Angular or Rails. If i send a request from Angular formatted as:

$scope.user = new User({user: {first_name: 'test first',
                last_name: 'test last',
                email: 'test@test.com',
                password: 'testpass',
                password_confirmation: 'testpass'}});

then this works:

 SQL (0.7ms)  INSERT INTO "users" ("created_at", "email", "encrypted_password", "first_name", "last_name", "updated_at") VALUES (?, ?, ?, ?, ?, ?)  [["created_at", Sun, 29 Jun 2014 11:25:47 UTC +00:00], ["email", "test@test.com"], ["encrypted_password", "$2a$10$p70dQldL.b1SnyQFacr9YechtPOxLLNCjyuawiY/iPJGu4YgoQYV."], ["first_name", "test first"], ["last_name", "test last"], ["updated_at", Sun, 29 Jun 2014 11:25:47 UTC +00:00]]

but $scope.user = new User(); doesn't. Here is my code:

Users angular controller:

angular
        .module('app')
        .controller('UsersCtrl', ['User', '$scope', '$route', function(User, $scope, $route) {
            $scope.user = new User();
            $scope.users = User.query();

            $scope.save = function() {
              $scope.user.$save();
              $scope.users.push($scope.user);
              $scope.user = new User();
            };
          }]);

Angular users service

angular
        .module('app')
        .factory('User', function($resource) {
          var User = $resource('http://0.0.0.0:3000/api/v1/users/:id.json', {id: '@id'}, {
            update: {
              method: 'PUT'
            }
          });

          return User;
        });

user rails controller

          def new
            respond_with(User.new)
          end

          def create
            @user = User.new(user_params)
            if @user.save
              render :json => { :success => true }
            else
              Rails.logger.debug @user.errors.full_messages
              render :json => { :errors => @user.errors.full_messages }, :status => :unprocessable_entity
            end
          end

      private
      def user_params
        params.require(:user).permit(:first_name, :last_name, :email, :password, :password_confirmation)
      end

angular view

<form class="form-horizontal" ng-submit="save(user)">
    <div class="control-group">
      <label class="control-label" for="inputFirstName">First Name:</label>
      <div class="controls">
        <input type="text" id="inputFirstName" ng-model="user.first_name"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="inputLastName">Last Name:</label>
      <div class="controls">
        <input type="text" id="inputLastName" ng-model="user.last_name"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="inputEmail">Email:</label>
      <div class="controls">
        <input type="text" id="inputEmail" ng-model="user.email"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="inputPassword">Password:</label>
      <div class="controls">
        <input type="text" id="inputPassword" ng-model="user.password"/>
      </div>
    </div>

    <div class="control-group">
      <label class="control-label" for="inputPasswordConfirmation">Password Confirmation:</label>
      <div class="controls">
        <input type="text" id="inputPasswordConfirmation" ng-model="user.password_confirmation"/>
      </div>
    </div>

    <div class="control-group">
      <div class="controls">
        <button type="submit" class="btn btn-primary">Create user</button>
      </div>
    </div>
  </form>

Answers


Need Your Help

Maximum size matrix without getting OutOfMemory error?

java memory matrix

Admittedly, I could have figured it out through trial and error, but I would also like to know whether or not this number varies and how (computer performance, other data structures present, compiler

tinyMCE 4 Pop-Up Tools Lose Focus in Colorbox Lightbox

tinymce colorbox

I'm trying to move my website to tinyMCE 4, but I've run across a few stumbling blocks since version 4 is still in beta and the documentation on http://www.tinymce.com/ is pretty sparse at this poi...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.