Beispiel
Ist das Formular "gültigen Zustand" nicht berücksichtigen werden "true", solange die gewünschte 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>
Versuch es selber " Definition und Verwendung
AngularJS ändert das Standardverhalten des <form> Element.
Formulare innerhalb einer AngularJS Anwendung sind bestimmte Eigenschaften gegeben. Diese Eigenschaften beschreibt den aktuellen Zustand des Formulars.
Formulare haben folgende Staaten:
-
$pristineKeine Felder wurden noch geändert -
$dirtyEin oder mehrere modifiziert wurden , -
$invalidDer Formularinhalt nicht gültig ist -
$validDer Formularinhalt ist gültig -
$submitteddas Formular abgeschickt wird
Der Wert eines jeden Staates repräsentiert einen Booleschen Wert, und ist entweder true oder false .
Formulare in AngularJS verhindert, dass die Standard-Aktion, die das Formular an den Server vorlegt, wenn das action-Attribut nicht angegeben ist.
Syntax
<form name=" formname "></form>Formulare werden mit dem Wert des Attributs name bezeichnet.
CSS-Klassen
Formulare innerhalb einer AngularJS Anwendung sind bestimmte Klassen gegeben. Diese Klassen können an Stilformen nach ihrem Zustand verwendet werden.
Folgende Klassen werden hinzugefügt:
-
ng-pristinekeine Felder wurde noch nicht geändert -
ng-dirtyEin oder mehrere Felder wurde geändert -
ng-validDer Formularinhalt ist gültig -
ng-invalidDer Formularinhalt nicht gültig -
ng-valid- keyEin Schlüssel für jede Validierung. Beispiel:ng-valid-required, nützlich , wenn es mehr als eine Sache gibt , die überprüft werden müssen -
ng-invalid- keyBeispiel:ng-invalid-required
Die Klassen entfernt werden , wenn der Wert , den sie vertreten , ist false .
Beispiel
Anwenden von Stilen für unmodifizierte (unberührte) bildet, und für modifizierte Formen:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Versuch es selber "