Formulaires AngularJS

Recommandations de cours :

AngularJS offre la liaison de données et la validation des contrôles d'entrée pour les formulaires.

Contrôles d'entrée

• Les contrôles d'entrée sont des éléments HTML d'entrée :
• élément input
• élément select
• élément bouton

élément textarea

Liaison de données ng-model Les contrôles d'entrée utilisent

L'instruction fournit la liaison de données.

<input type="text" ng-model="firstname"> propriété Maintenant, l'application a un nom

ng-model de la propriété.

L'instruction lie le contrôleur d'entrée à la partie restante de l'application. propriétéPeut être mentionné dans le contrôleur :

Exemple

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
});
</script>

Essayer vous-même

Il peut également être mentionné à d'autres endroits de l'application :

Exemple

<form>
  Nom : <input type="text" ng-model="firstname">
</form>
<h1>Vous avez entré : {{firstname}}</h1>

Essayer vous-même

Case à cocher

La valeur de la case à cocher est true ou false. Mettre ng-model L'instruction s'applique aux cases à cocher et utilise sa valeur dans votre application.

Exemple

Si vous cochez la case, le titre s'affichera :

<form>
  Cochez pour afficher le titre :
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">Mon titre</h1>

Essayer vous-même

Boutons radio

Utilisez ng-model L'instruction lie les boutons radio à votre application.

Avec le même ng-model Les boutons radio peuvent avoir différentes valeurs, mais seules les valeurs sélectionnées seront utilisées.

Exemple

Affichez du texte en fonction de la valeur de l'bouton radio sélectionné :

<form>
  Choisissez un sujet :
  <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>

Essayer vous-même

La valeur de myVar sera chiens、tutoriels ou voitures.

la liste déroulante

Utilisez ng-model L'instruction lie la liste déroulante à votre application.

ng-model Les propriétés définies dans l'attribut auront la valeur de l'option sélectionnée dans la liste déroulante.

Exemple

Affichez du texte en fonction de la valeur de l'option sélectionnée :

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

Essayer vous-même

La valeur de myVar sera chiens、tutoriels ou voitures.

Exemple de formulaire AngularJS

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 de famille :<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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
});
</script>

Essayer vous-même

novalidate L'attribut est une nouvelle propriété HTML5. Elle désactive toute validation par défaut du navigateur.

Explication de l'exemple

ng-app L'instruction définit l'application AngularJS.

ng-controller L'instruction définit le contrôleur de l'application.

ng-model L'instruction lie deux éléments d'entrée aux objets user du modèle.

formCtrl Le contrôleur pour master L'objet à la valeur initiale et définira reset() Méthodes.

reset() La méthode réglera user L'objet est réglé pour être égal à master Objet.

ng-click L'instruction est appelée uniquement lors du clic sur le bouton reset() Méthodes.

Cette application n'a pas besoin de l'attribut novalidate, mais vous utilisez généralement cette propriété dans les formulaires AngularJS pour remplacer la validation HTML5 standard.