Post form data using angularjs

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 :-

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> <html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <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"> <label>Name</label> <input type="text" name="name" class="form-control" ng-model="user.name"> <span ng-show="errorName">{{errorName}}</span> </div> <div class="form-group"> <label>Username</label> <input type="text" name="username" class="form-control" ng-model="user.username"> <span ng-show="errorUserName">{{errorUserName}}</span> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> <span ng-show="errorEmail">{{errorEmail}}</span> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </body> </html>

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 {{errorName}} {{errorUserName}} {{errorEmail}}

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

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.name, 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.

<script> // 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 $http({ 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 = data.errors.name; $scope.errorUserName = data.errors.username; $scope.errorEmail = data.errors.email; } else { $scope.message = data.message; } }); }; }); </script>

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.

<?php $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.