Formulaires en AngularJS fournit des données de liaison et la validation des commandes d'entrée.
Contrôles d'entrée
les contrôles d'entrée sont les éléments d'entrée de HTML:
- éléments d'entrée
- sélectionnez les éléments
- éléments de bouton
- éléments textarea
Données-Binding
Contrôles d'entrée fournit des données de liaison en utilisant le ng-model directive.
<input type="text" ng-model="firstname">
L'application ne dispose maintenant d' une propriété nommée firstname .
Le ng-model directive lie le contrôleur d'entrée pour le reste de votre application.
La propriété firstname , peut être appelé dans un contrôleur:
Exemple
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Essayez - le vous - même » Il peut aussi être nommé ailleurs dans l'application:
Exemple
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Essayez - le vous - même » Checkbox
Une case à cocher a la valeur true ou false . Appliquer le ng-model directive à une case à cocher, et de l' utiliser de la valeur dans votre application.
Exemple
Afficher l'en-tête si la case est cochée:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Essayez - le vous - même » radiobuttons
Boutons radio Liez votre application avec le ng-model directive.
Les boutons radio avec le même ng-model peuvent avoir des valeurs différentes, mais seulement celle sélectionnée sera utilisée.
Exemple
Afficher un texte, basé sur la valeur du bouton radio sélectionné:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Essayez - le vous - même » La valeur de myVar sera soit des dogs , tuts , ou les cars .
selectbox
Liez boîtes de sélection à votre application avec le ng-model directive.
La propriété définie dans le ng-model attribut aura la valeur de l'option sélectionnée dans le selectbox.
Exemple
Afficher un texte, basé sur la valeur de l'option sélectionnée:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Essayez - le vous - même » La valeur de myVar sera soit des dogs , tuts , ou les cars .
Un formulaire AngularJS Exemple
form = {{user}}
master = {{maître}}
Code d'application
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</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 »  | L'attribut novalidate est nouveau dans HTML5. Il désactive toute validation du navigateur par défaut. |
|---|
Exemple Explained
La directive ng-app définit l'application AngularJS.
La directive ng-contrôleur définit le contrôleur d'application.
La directive ng-modèle lie deux éléments d' entrée à l'objet utilisateur dans le modèle.
Le contrôleur formCtrl définit des valeurs initiales pour l'objet maître, et définit la méthode reset ().
La méthode reset () définit l'objet utilisateur égal à l'objet maître.
La directive ng-clic appelle la méthode reset (), uniquement si le bouton est cliqué.
L'attribut novalidate est pas nécessaire pour cette application, mais normalement vous l'utiliser dans AngularJS formes, pour remplacer la validation HTML5 standard.