AngularJS Formulaires

Les formulaires AngularJS sont des collections de contrôles de saisie.

Contrôles HTML

Les éléments input HTML suivants sont appelés contrôles HTML :

  • élément input
  • élément select
  • élément button
  • élément textarea

Liaison de données

Les contrôles de saisie utilisent la directive ng-model pour réaliser la liaison de données.

<input type="text" ng-model="firstname">

Grâce au code ci-dessus, l'application possède une propriété nommée firstname.

Elle est liée à votre application à l'aide de la directive ng-model.

La propriété firstname peut être utilisée dans le contrôleur :

Exemple

var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "John"; });

Essayez-le vous-même »

Il peut également être utilisé ailleurs dans l'application :

Exemple

<forme> Prénom : <input type="text" ng-model="firstname"> </form> <h1>Vous avez saisi : {{firstname}}</h1>

Essayez-le vous-même »

Case à cocher

La valeur d'une case à cocher est true ou false. Elle peut être liée à l'aide de la directive ng-model, et sa valeur peut être utilisée dans l'application :

Exemple

Une fois la case à cocher sélectionnée, le contenu de la balise h1 est affiché :

<forme> Cochez pour afficher un en-tête : <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">Mon en-tête</h1>

Essayez-le vous-même »

Boutons radio

Nous pouvons utiliser ng-model pour lier des boutons radio à votre application.

Les boutons radio utilisent le même ng-model et peuvent avoir des valeurs différentes, mais seule la valeur du bouton radio sélectionné sera utilisée.

Exemple

Afficher des informations en fonction du bouton radio sélectionné :

<form>Sélectionnez une option :<input type="radio" ng-model="myVar" value="dogs">Chiens <input type="radio" ng-model="myVar" value="tuts">Tutoriels <input type="radio" ng-model="myVar" value="cars">Voitures </form>

Essayez-le vous-même »

La valeur de myVar peut être dogs, tuts ou cars.

Menus déroulants

Vous pouvez lier le menu déroulant à votre application à l’aide de la directive ng-model.

La valeur de l’attribut ng-model est l’option que vous avez sélectionnée dans le menu déroulant :

Exemple

Afficher des informations en fonction de l’option sélectionnée dans le menu déroulant :

<form>Sélectionnez une option :<select ng-model="myVar"> <option value=""> <option value="dogs">Chiens <option value="tuts">Tutoriels <option value="cars">Voitures </select> </forme>

Essayez-le vous-même »

La valeur de myVar peut être dogs, tuts ou cars.

Formulaires HTML

Les formulaires HTML existent généralement avec les contrôles HTML.

Exemple de formulaires AngularJS

Prénom :

Nom :


form = {{user}}

master = {{master}}

Code de l'application

<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> Prénom :<br> <input type="text" ng-model="user.firstName"><br> Nom :<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RÉINITIALISER</button> </form> <p>form = {{user}}</p> <p>master = {{master}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.master = {firstName: "John", lastName: "Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }); </script>

Essayez-le vous-même »
Note novalidateL'attribut est nouveau dans HTML5. Il désactive la validation par défaut du navigateur.

Explication de l'exemple

ng-appLa directive définit l'application AngularJS.

ng-controllerLa directive définit le contrôleur de l'application.

ng-modelLa directive lie deux éléments d'entrée à l'objet userdu modèle.

formCtrlLa fonction affecte àmasterla valeur initiale de l'objet, et définitreset()la méthode.

reset()La méthode définit l'objetuserégal à l'objetmaster.

ng-clickLa directive appellereset()la méthode, et elle est appelée lorsque le bouton est cliqué.

L'attribut novalidate n'est pas requis dans l'application, mais vous devez l'utiliser dans les formulaires AngularJS pour outrepasser la validation HTML5 standard.

Autres extensions