Analyse détaillée de la manière de soumettre des formulaires dans la programmation AngularJS

Avant l'émergence d'AngularJS, de nombreux développeurs étaient confrontés au problème de la soumission de formulaires. Avec autant de façons différentes de soumettre un formulaire, il aurait été facile de rendre les gens fous... mais cela rend toujours les gens fous.

Aujourd'hui, nous allons examiner un formulaire qui était auparavant soumis en utilisant PHP et comment le convertir en utilisant Angular. Utiliser Angular pour traiter des formulaires a été un moment « aha » pour moi. Même si cela ne touche même pas au niveau superficiel d'Angular, il aide les utilisateurs à voir le potentiel de la soumission de formulaires et à comprendre les deux méthodes de liaison de données.

Nous utiliserons la plateforme jQuery pour ce processus. Le travail à effectuer consiste donc à utiliser d'abord javascript. Nous soumettrons le formulaire, afficherons les messages d'erreur, ajouterons des classes d'erreur et afficherons et masquerons les informations en JavaScript.

Après cela, nous utiliserons Angular. Nous devons effectuer la plupart du travail requis avant de l'utiliser, et une grande partie du travail que nous avons effectué auparavant sera très simple. Commençons.

Formulaire simple

Nous nous concentrerons sur deux manières de soumettre le formulaire :

L'ancienne méthode : soumission de formulaires jQuery et PHP
Nouvelle méthode : soumission de formulaire AngularJS et PHP

Jetez d’abord un œil à notre formulaire, c’est super simple :

2015619102411460.jpg (800×400)

Exigences formelles

Implémenter le traitement du formulaire d'actualisation de page
Entrez le nom et l'alias du super-héros
S'il y a une erreur, un message d'erreur s'affichera
Si la saisie est incorrecte, l'entrée deviendra rouge
Si tout le contenu est ok, un message de réussite s'affichera

Structure du document

Dans notre démo, seuls deux fichiers sont nécessaires

index.html
processus.php

Traitement des formulaires

Créons un nouveau PHP pour gérer le formulaire. La page est très petite et utilise POST pour soumettre des données.

Gestion des formulaires : ce n'est pas si important pour nous. Vous pouvez utiliser n’importe quelle autre langue pour traiter votre formulaire.

// 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);

Copier après la connexion

Il s'agit d'un script de traitement de formulaire très simple. Nous vérifions uniquement si la donnée existe. Si elle existe, aucun traitement ni opération n'est effectué. Si elle n'existe pas, nous devons ajouter une information au tableau $errors.

Afin de renvoyer nos données pour les appels AJAX, nous devons utiliser echo et json_encode. C'est tout ce que nous devons faire pour le traitement des formulaires PHP. Il en va de même pour l'utilisation de jQuery AJAX ou Angular ordinaire pour traiter des formulaires.
Formulaire d'affichage

Créons un code HTML pour afficher notre formulaire

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

Copier après la connexion

Maintenant, nous avons notre formulaire. Nous avons également utilisé Bootstrap pour rendre le formulaire moins laid. Grâce aux règles de syntaxe Bootstrap, chaque entrée contient un emplacement pour afficher le message d'erreur de notre texte.

2015619102451118.jpg (800×400)