Post form data using angularjs

Rakesh Sharma      20 Comments  

How to post form data using angularjs and process in php

Most of developers using jquery, ajax to post form data. But now a new library comes out with named angularjs. In angularjs $http service provided to communicate remote http servers. There are many ways to post form data using angularjs, but i am sharing a simple way. We’ll use a simple form that used to be submitted using PHP and how to convert that to Angular.

What we are building :-

Post form data using angularjs

  • 1. Setting up angularjs application/model/controller.
  • 2. Use angular object to get form data.
  • 3. Post form data using angularjs.
  • 4. Process/handle form data and errors in php.
  • 5. Show form success/errors using angularjs.

So let’s start step by step how to post form data using angularjs or submit form with angularjs.

1. The Form – Setting up angularjs application/model/controller :-

Let’s create html to show up form and initialize angularjs app.

<!DOCTYPE html>
    <link rel="stylesheet" href=""> 
    <script src= ""></script> 
<body ng-app="postApp" ng-controller="postController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
    <div class="page-header"><h1>Post data using angularJS</h1></div>
    <!-- FORM -->
    <form name="userForm" ng-submit="submitForm()">
    <div class="form-group">
        <input type="text" name="name" class="form-control" ng-model="">
        <span ng-show="errorName">{{errorName}}</span>
    <div class="form-group">
        <input type="text" name="username" class="form-control" ng-model="user.username">
        <span ng-show="errorUserName">{{errorUserName}}</span>
    <div class="form-group">
        <input type="email" name="email" class="form-control" ng-model="">
        <span ng-show="errorEmail">{{errorEmail}}</span>
    <button type="submit" class="btn btn-primary">Submit</button>

Understanding the form :- We including angualrjs script library to work with angularjs like jquery.

<body ng-app="postApp" ng-controller="postController">

ng-app="postApp" – Directive that define angularjs application
ng-controller="postController" – Directives that define angularjs controller

<form name="userForm" ng-submit="submitForm()">

ng-submit="submitForm()" – We are calling a function on form submit

<span ng-show="errorName">{{errorName}}</span>
<span ng-show="errorUserName">{{errorUserName}}</span>
<span ng-show="errorEmail">{{errorEmail}}</span>

ng-show="errorName" – This will control to show errors. we will showing up errors in this span tag using ng-show directives.

For more information about directives follow Docs

2. Use angular object to get form data :-

We are using ng-model directive to define angular object we are using user object to process with form like, user.username

3. Post form data using angularjs :-

Let’s make angularjs script to post form data using angularjs. Add this script to your form to process. Here we are using POST method Submit Form with angularjs to php.

    // Defining angularjs application.
    var postApp = angular.module('postApp', []);
    // Controller function and passing $http service and $scope var.
    postApp.controller('postController', function($scope, $http) {
      // create a blank object to handle form data.
        $scope.user = {};
      // calling our submit function.
        $scope.submitForm = function() {
        // Posting data to php file
          method  : 'POST',
          url     : 'clone.php',
          data    : $scope.user, //forms user object
          headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
          .success(function(data) {
            if (data.errors) {
              // Showing errors.
              $scope.errorName =;
              $scope.errorUserName = data.errors.username;
              $scope.errorEmail =;
            } else {
              $scope.message = data.message;

Understanding the script :-

$scope: is a object of application model For more follow Docs.
$http: The Angular service that will help to communicate remote http servers . For more information, check out the Docs.

4. Process/handle form data and errors in php :-

Now create a clone.php and add below code to show response or errors back to angularjs application.

$errors = array();
$data = array();
// Getting posted data and decodeing json
$_POST = json_decode(file_get_contents('php://input'), true);

// checking for blank values.
if (empty($_POST['name']))
  $errors['name'] = 'Name is required.';

if (empty($_POST['username']))
  $errors['username'] = 'Username is required.';

if (empty($_POST['email']))
  $errors['email'] = 'Email is required.';

if (!empty($errors)) {
  $data['errors']  = $errors;
} else {
  $data['message'] = 'Form data is going well';
// response back.
echo json_encode($data);

5. Show form success/errors using angularjs :-

We are using ng-show directive to show errors in our form. which we are sending back if form has any errors.

<span ng-show="errorName">{{errorName}}</span>
<span ng-show="errorUserName">{{errorUserName}}</span>
<span ng-show="errorEmail">{{errorEmail}}</span>

So now you can easily post form data using angularjs, you can also use $.param() method to convert user object in string and can get directly your post values. But we are working with angularjs so i am not including jquery here. So Now you can easily submit your form with angularjs.

  • pancitjef

    another nice tutorial

  • Amit Kushwaha

    I got Sorry Amit, it seems that my mail server is not responding. Please try again later! why?

  • Evan Wieland

    Very nice tutorial, sir.

  • Alan

    Very nice tutorial, I have a question, if I click the submit button where will the data be shown? Coz I have try it but I can see the data that I have posted , am new in angular anY help pliz

  • Aramayis Iritsyan

    thank you , you help me

  • Rishi Kumar

    Thanks, It was helpfull

  • Omar

    Here is a better way to understand it ( original way )

  • Vaios Anastasiadis

    One thing I can’t understand is the ng-show=”errorxxxx”. I presume that the ng-show is waiting for a true or false statement, correct? So how is a returned string like errorName being translated as true or false? Am I missing something?

    • In JavaScript, each variable that holds a value will return true when used in a statement. So unless the string is empty, it will convert to a true.

      false, 0, empty strings ” and “”, NaN, undefined, and null are always evaluated as false; everything else is true.

  • to store images to server from cordova camera plugin..using a single button…it must take or choose pohto and store imges to server…how?? whatsapp

  • Suraj Kharve

    Hello Rakesh Sir, how to submit image with this form ? I have take one extra field as –
    and i am taking it as – $_FILES[‘image’][‘name’] in the clone .php file but i am getting error as – ‘Undefined index: image ‘. please help

    • rakesh sharma

      Then you need to save image as like ajax or use ng-upload for that

      • Suraj Kharve

        how to do that ?can you please provide me an example of file upload using ng-upload. I am using angular 1.4.1

        • Pulkit Kinra

          Please share sample for uploading file and data to PHP with me.
          Email Id :

          Please do share its urgent

  • Rijo Mon R

    Hello Rakesh Sir, how to submit image with this form ? I have take one extra field as –
    and i am taking it as – $_FILES[‘image’][‘name’] in the clone .php file but i am getting error as – ‘Undefined index: image ‘. please help

    • Rijo Mon R

      Please kindly send any reference link or sample pgm to my email

  • mohamed idris

    Hi Rakesh,

    I have doubt. Why u validate & show the errors again in php. Is it needed?

  • Shah Parth

    Where is the demo?

  • DeezNuts

    Awesome tut, saved me some time.

  • Kulkarni Baswaraj

    cleanliness Overloaded… :)