Detailed analysis of the way to submit forms in AngularJS programming

Before the emergence of AngularJS, many developers faced the problem of form submission. With so many different ways to submit a form, it would have been easy to drive people crazy... but it still drives people crazy.

Today, we will take a look at a form that used to be submitted using PHP and how to convert it to using Angular. Using Angular to process forms was an "aha" moment for me. Even though it doesn't even touch on the surface level of Angular, it helps users see the potential of form submission and understand the two data binding methods.

We will use the jQuery platform for this process. So the work to be done is using javascript first. We'll submit the form, display error messages, add error classes, and show and hide information in JavaScript.

After that, we will use Angular. We have to do most of the work required before using it, and a lot of the work we did before will be very easy. Let's get started.

Simple form

We will focus on two ways to submit the form:

The old way: jQuery and PHP form submission
New method: AngularJS and PHP form submission

First take a look at our form, it’s super simple:

2015619102411460.jpg (800×400)

Formal requirements

Implement page refresh form processing
Enter name and superhero alias
If there is an error, an error message will be displayed
If the input is incorrect, the input will turn red
If all content is ok, a success message will be displayed

Document Structure

In our demo, only two files are needed

index.html
process.php

Form processing

Let’s create a new PHP to handle the form. The page is very small and uses POST to submit data.

Handling forms: This is not that important to us. You can use any other language you like to process your form.

// process.php
 
<&#63;php
 
$errors   = array();  // array to hold validation errors
$data    = array();   // array to pass back data
 
// validate the variables ======================================================
 if (empty($_POST['name']))
  $errors['name'] = 'Name is required.';
 
 if (empty($_POST['superheroAlias']))
  $errors['superheroAlias'] = 'Superhero alias is required.';
 
// return a response ===========================================================
 
 // response if there are errors
 if ( ! empty($errors)) {
 
  // if there are items in our errors array, return those errors
  $data['success'] = false;
  $data['errors'] = $errors;
 } else {
 
  // if there are no errors, return a message
  $data['success'] = true;
  $data['message'] = 'Success!';
 }
 
 // return all our data to an AJAX call
 echo json_encode($data);

Copy after login

This is a very simple form processing script. We only check whether the data exists. If it exists, no processing or operation is performed. If it does not exist, we need to add a piece of information to the $errors array.

In order to return our data for AJAX calls, we need to use echo and json_encode. This is all we need to do for PHP form processing. The same is true for using ordinary jQuery AJAX or Angular to process forms.
Display form

Let’s create an HTML to display our form

<!-- index.html -->
 
<!doctype html>
<html>
<head>
 <title>Angular Forms</title>
 
 <!-- LOAD BOOTSTRAP CSS -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
 
 <!-- LOAD JQUERY -->
  <!-- when building an angular app, you generally DO NOT want to use jquery -->
  <!-- we are breaking this rule here because jQuery's $.param will help us send data to our PHP script so that PHP can recognize it -->
  <!-- this is jQuery's only use. avoid it in Angular apps and if anyone has tips on how to send data to a PHP script w/o jQuery, please state it in the comments -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
 <!-- PROCESS FORM WITH AJAX (OLD) -->
 <script>
  <!-- WE WILL PROCESS OUR FORM HERE -->
 </script>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
 
 <!-- PAGE TITLE -->
 <div class="page-header">
  <h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
 </div>
 
 <!-- SHOW ERROR/SUCCESS MESSAGES -->
 <div id="messages"></div>
 
 <!-- FORM -->
 <form>
  <!-- NAME -->
  <div id="name-group" class="form-group">
   <label>Name</label>
   <input type="text" name="name" class="form-control" placeholder="Bruce Wayne">
   <span class="help-block"></span>
  </div>
 
  <!-- SUPERHERO NAME -->
  <div id="superhero-group" class="form-group">
   <label>Superhero Alias</label>
   <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">
   <span class="help-block"></span>
  </div>
 
  <!-- SUBMIT BUTTON -->
  <button type="submit" class="btn btn-success btn-lg btn-block">
   <span class="glyphicon glyphicon-flash"></span> Submit!
  </button>
 </form>
 
</div>
</div>
</body>
</html>

Copy after login

Now, we have our form. We also used Bootstrap to make the form look less ugly. Using Bootstrap syntax rules, each input contains a spot to display the error message of our text.

2015619102451118.jpg (800×400)