AngularJS- formDirektive
Beispiel
Der "gültige Zustand" dieses Formulars wird nicht als "wahr" betrachtet, solange das erforderliche Eingabefeld leer ist:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Definition und Verwendung
AngularJS ändert das Standardverhalten des <form>Elements.
Formulare innerhalb einer AngularJS-Anwendung erhalten bestimmte Eigenschaften. Diese Eigenschaften beschreiben den aktuellen Zustand des Formulars.
Formulare haben folgende Zustände:
$pristineEs wurden noch keine Felder geändert$dirtyEine oder mehrere wurden geändert$invalidDer Formularinhalt ist ungültig$validDer Formularinhalt ist gültig$submittedDas Formular wird übermittelt
Der Wert jedes Zustands stellt einen booleschen Wert dar und ist entweder true
oder false.
Formulare in AngularJS verhindern die Standardaktion, bei der das Formular an den Server gesendet wird, wenn das Aktionsattribut nicht angegeben ist.
Syntax
<form name="formname"></form>
Auf Formulare wird mit dem Wert des name-Attributs verwiesen.
CSS-Klassen
Formulare innerhalb einer AngularJS-Anwendung erhalten bestimmte Klassen . Diese Klassen können verwendet werden, um Formulare ihrem Status entsprechend zu gestalten.
Folgende Klassen kommen hinzu:
ng-pristineEs wurden noch keine Felder geändertng-dirtyEin oder mehrere Felder wurden geändertng-validDer Formularinhalt ist gültigng-invalidDer Formularinhalt ist ungültigng-valid-keyEin Schlüssel für jede Validierung. Beispiel:ng-valid-required, nützlich, wenn mehr als eine Sache validiert werden mussng-invalid-keyBeispiel:ng-invalid-required
Die Klassen werden entfernt, wenn der Wert, den sie darstellen, false.
Beispiel
Wenden Sie Stile für unveränderte (ursprüngliche) Formulare und für modifizierte Formulare an:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>