How do I send form data to server using angular?

Question

Currently, I am using a server side framework CakePHP to build my app.

I need to integrate angular into my app.

Currently, I send the following inputs

User.old_password, User.new_password, User.new_password_confirm

to this url /mypasswords/new using POST

This works just fine.

I understand that to send data to server side I need to use services in Angular.

This is my Angular code so far.

var app = angular.module("myApp", []);

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      // Submit as normal
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

services = angular.module('myApp.services', ['ngResource']);

services.factory("UserService", function($http, $q) {
  var service;
  // service code here
});

So what do I write in the //service code here part? What other parts am I missing?

My form currently looks like this as html after being rendered. (I know I probably have to remove action and method attributes from my form. Do I?)

<form action="/mypasswords/new" id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">

<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>            

<input name="data[User][old_password]" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
    <div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
     </div>
</div>

<div id="u27" class="u27_container">
    <input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">                         

</div>
</form>

Thank you.

reptildarat · Accepted Answer · 2014-01-01 06:35:56Z

1

if you want just to send the form with ajax, No need to create factory, just do it in controller like this:

var app = angular.module("myApp", [$http]);

app.controller('passwordController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.changePasswordForm = function() {
    if ($scope.change_password_form.$valid) {
      //note: use full url, not partial....
      $http.post('http://myweb.com/mypasswords/new', change_password_form.Data) 
      .success(function(data, status, headers, config) {
        //do anything when it success..
      })
      .error(function(data, status, headers, config){
        //do anything when errors...
      });
    } else {
      $scope.change_password_form.submitted = true;
    }
  }
}]);

And your form will looks like this:

<form id="change_password_form" name="change_password_form" ng-controller="passwordController" ng-submit="changePasswordForm()" method="post" accept-charset="utf-8" class="ng-scope ng-pristine ng-valid">

<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>            

<input name="data[User][old_password]" ng-model="Data.old_password" id="u56" placeholder="Enter old password..." class="u56 profile_input" type="password">
<input name="data[User][new_password]" ng-model="Data.new_password" id="u57" placeholder="Enter new password..." class="u57 profile_input" type="password">
<input name="data[User][new_password_confirm]" ng-model="Data.new_password_confirm" id="u58" placeholder="Enter new password..." class="u58 profile_input" type="password">
<div id="u25" class="u25_container">
    <div id="u25_img" class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
     </div>
</div>

<div id="u27" class="u27_container">
    <input id="u27_img" class="submit_button detectCanvas" type="submit" value="SAVE">                         

</div>
</form>

answered Jan 1, 2014 at 6:35

reptildarat

1,0362 gold badges18 silver badges35 bronze badges

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

6 Comments

Kim Stacks Over a year ago

Why should I use full path? When to use factory? When not to use factory?

reptildarat Over a year ago

1) because you don't specify the ng-app config, 2) it's just like a class, you need it to separate boiler plate code.

Kim Stacks Over a year ago

by ng-app config, you mean something like this? gist.github.com/simkimsia/f055fead5a18da33825e

reptildarat Over a year ago

see in here: stackoverflow.com/questions/17011616/…

reptildarat Over a year ago

and maybe you found this useful: github.com/mgonto/restangular i always use that to my projects

|

Kim Stacks · Accepted Answer · 2016-03-10 08:36:18Z

Step 1: write form using normal html instead of FormHelper in CakePHP

The form should look like this:

<form name="change_password_form" ng-controller="passwordController"
         ng-submit="changePasswordForm()">

        <input name="data[User][old_password]" ng-model="data.User.old_password" type="password" placeholder="Enter old password..." class="u56 profile_input">
        <input name="data[User][new_password]" ng-model="data.User.new_password" type="password" placeholder="Enter new password..." class="u57 profile_input">
        <input name="data[User][new_password_confirm]" ng-model="data.User.new_password_confirm" type="password" placeholder="Enter new password again..." class="u58 profile_input">

            <div id="u25"
                 class="u25_container">
                <div id="u25_img"
                     class="clear_all_button detectCanvas" onclick="document.getElementById('change_password_form').reset()">
                </div>
            </div>

            <div id="u27"
                 class="u27_container">
                <button type="submit" id="u27_img" ng-click="debug()"
                     class="submit_button detectCanvas" />
            </div>
        </form>

Step 2: write the app.js in the following manner.

the X-Requested-With header is important if you want to use the CakePHP $this->request->is('ajax')

angular.module("myApp", [])
.controller('passwordController', function($scope, $http) {
  $scope.changePasswordForm = function() {
    console.log('change passwrd form activated');
    //note: use full url, not partial....
    $http({
        method  : 'POST',
        url     : '/mypasswords/new',
        data    : $.param($scope.data),  // pass in data as strings
        headers : { 'Content-Type': 'application/x-www-form-urlencoded',
        'X-Requested-With' : 'XMLHttpRequest'
        }  // set the headers so angular passing info as form data (not request payload)
    })
    .success(function(data, status, headers, config) {
        //do anything when it success..
        console.log('works!');
      })
    .error(function(data, status, headers, config){
        //do anything when errors...
        console.log('errors!');
    });
  }
  $scope.debug = function () {
   console.log($scope);
  }
});

Collectives™ on Stack Overflow

How do I send form data to server using angular?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related