Formulare in AngularJS bietet Datenbindung und Validierung von Eingabesteuerungen.
Input-Steuerelemente
Eingangskontrollen sind die HTML-Eingabeelemente:
- Eingabeelemente
- wählen Sie Elemente
- Schaltfläche Elemente
- Textfeldelemente
Datenbindungs
Eingangskontrollen bietet Datenbindung durch die Verwendung von ng-model - Richtlinie.
<input type="text" ng-model="firstname">
Die Anwendung hat jetzt eine Eigenschaft namens firstname .
Die ng-model Direktive bindet die Eingabesteuerung auf den Rest der Anwendung.
Die Eigenschaft firstname , kann in einem Controller bezeichnet werden:
Beispiel
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script> Versuch es selber " Es kann auch in der Anwendung anderer Stelle genannt werden:
Beispiel
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Versuch es selber " Checkbox
Ein Kontrollkästchen hat den Wert true oder false . Tragen Sie die ng-model Richtlinie eine Checkbox, und es ist Wert in Ihrer Anwendung verwenden.
Beispiel
Zeigen Sie den Header, wenn das Kontrollkästchen aktiviert ist:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Versuch es selber " Radio Knöpfe
Binden Sie Radio - Buttons für Ihre Anwendung mit der ng-model - Richtlinie.
Radio - Schaltflächen mit demselben ng-model können unterschiedliche Werte haben, aber nur der ausgewählte verwendet.
Beispiel
Zeigen Sie einen Text, basierend auf dem Wert des Optionsfelds ausgewählt:
<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>
Versuch es selber " Der Wert von myVar wird entweder dogs , tuts oder cars .
Auswahlbox
Binden Sie Auswahlboxen für Ihre Anwendung mit der ng-model - Richtlinie.
Die Eigenschaft definiert im ng-model Attribut den Wert der gewählten Option in der Auswahlbox haben.
Beispiel
Anzeigen einen Text, basierend auf dem Wert der gewählten Option:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Versuch es selber " Der Wert von myVar wird entweder dogs , tuts oder cars .
Ein AngularJS Formular Beispiel
form = {{user}}
master = {{Master}}
Anwendungscode
<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>
Versuch es selber "  | Das Attribut novalidate ist neu in HTML5. Es deaktiviert alle Standard-Browser Validierung. |
|---|
Beispiel erklärt
Die ng-App - Richtlinie definiert die AngularJS Anwendung.
Die ng-Controller - Richtlinie definiert die Anwendungscontroller.
Die ng-Modell Direktive bindet zwei Eingabeelemente auf das Benutzerobjekt im Modell.
Die formCtrl Steuerung setzt Anfangswerte an den Master - Objekt, und definiert den Reset () -Methode.
Der Reset () Methode setzt den Benutzerobjekt gleich dem Master - Objekt.
Die ng-Click - Direktive ruft die Methode reset (), nur dann , wenn die Schaltfläche geklickt wird.
Das novalidate Attribut ist für diese Anwendung nicht benötigt, aber in der Regel werden Sie es in AngularJS Formulare verwenden, Standard HTML5 Validierung außer Kraft zu setzen.