Le traitement des formulaires d'AngularJS est assez simple. Lorsque AngularJS utilise la liaison de données bidirectionnelle pour la validation des formulaires, cela nous aide essentiellement dans le traitement des formulaires.
Il existe de nombreux exemples d'utilisation de cases à cocher, et il existe de nombreuses façons de les gérer. Dans cet article, nous examinerons la liaison des cases à cocher et des boutons radio aux variables de données et ce que nous pouvons en faire.
Créer une forme angulaire
Dans cet article, nous avons besoin de deux fichiers : index.html et app.js. app.js est l'endroit où se trouve tout le code angulaire (il n'est pas gros), et index.html est l'endroit où les actions sont exécutées. Nous créons d’abord le fichier AngularJS.
// app.js
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
});
Dans ce fichier, tout ce que nous faisons est de créer l'application Angular. Nous avons également créé un contrôleur et un objet pour contenir toutes les données du formulaire.
Jetons un coup d'œil au fichier index.html Dans ce fichier, nous créons le formulaire puis effectuons la liaison des données. Nous avons utilisé Bootstrap pour mettre en page rapidement la page.
<-- index.html -->
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<!-- load up bootstrap and add some spacing -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
form { margin-bottom:50px; }
</style>
<!-- JS -->
<!-- load up angular and our custom script -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<h2>Angular Checkboxes and Radio Buttons</h2>
<form>
<!-- NAME INPUT -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<!-- =============================================== -->
<!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
<!-- =============================================== -->
<!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
</form>
<!-- SHOW OFF OUR FORMDATA OBJECT -->
<h2>Sample Form Object</h2>
<pre class="brush:php;toolbar:false">
{{ formData }}