AngularJS Formularanweisung

AngularJS-Referenzhandbuch

Definition und Verwendung

AngularJS-Anpassung <form> Standardverhalten des Elements.

Formulare im AngularJS-Bereich haben bestimmte Eigenschaften. Diese Eigenschaften beschreiben den aktuellen Zustand des Formulars.

Das Formular hat folgende Zustände:

  • $pristine Kein Feld wurde geändert
  • $dirty Ein oder mehrere Felder wurden geändert
  • $invalid Der Inhalt des Formulars ist ungültig
  • $valid Der Inhalt des Formulars ist gültig
  • $subscribed Formular wurde eingereicht

Der Wert jeder Zustands represents a Boolean value, which is true oder false.

Falls die action-Eigenschaft nicht angegeben ist, blockiert AngularJS das Standardverhalten, d.h. das Senden des Formulars an den Server.

Beispiel

Beispiel 1

Solange das erforderliche Eingabefeld leer ist, wird der "gültige Zustand" dieses Formulars nicht als "true" betrachtet:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Der gültige Zustand des Formulars ist:</p>
<h1>{{myForm.$valid}}</h1>

Versuchen Sie es selbst

Beispiel 2

Stellen Sie das Design für die ursprünglich unveränderte und geänderte Formular an:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Versuchen Sie es selbst

Syntax

<form name="formname</form>

Durch die Verwendung name Wert der Eigenschaft, um das Formular zu referenzieren.

CSS-Klassen

Das Formular innerhalb der AngularJS-Anwendung wird bestimmten Klassen zugewiesen. Diese Klassen können verwendet werden, um die Formularstile basierend auf ihrem Zustand zu setzen.

Die folgenden Klassen wurden hinzugefügt:

  • ng-pristine Es gibt keine Felder, die noch nicht geändert wurden
  • ng-dirty Ein oder mehrere Felder wurden geändert
  • ng-valid Der Inhalt des Formulars ist gültig
  • ng-invalid Der Inhalt des Formulars ist ungültig
  • ng-valid-key Einmal pro Schlüssel überprüfen. Beispiel:ng-valid-requiredsehr nützlich, wenn mehr als ein Element überprüft werden muss
  • ng-invalid-key Beispiel:ng-invalid-required

Wenn der Wert, der von der Klasse repräsentiert wird falsewird diese Klasse gelöscht.

AngularJS-Referenzhandbuch