Single Page Applications mit AngularJS – Teil 4: Validieren und internationalisieren

Inhaltsverzeichnis

Das Validieren und Formatieren von Eingaben ist ein integraler Bestandteil von AngularJS. Wenn alle Stricke reißen, kann der Entwickler auch seine eigene Logik dafür einklinken.

Dreh- und Angelpunkt bei der Validierung von Eingaben ist der sogenannte Form Controller. AngularJS stellt für jedes verwendete Formular ein solches Element im jeweiligen Scope zur Verfügung. Die Eigenschaft des Scopes, der auf den Form Controller verweist, hat jenen Namen, den der Entwickler über das Attribut name dem Formular spendiert.

Unter anderem weist der Form Controller eine Eigenschaft $dirty auf. Sie zeigt an, ob der Benutzer ein Feld des Formulars geändert hat. Das genaue Gegenteil davon ist die Eigenschaft $pristine, die ebenfalls jeder Form Controller anbietet. Darüber hinaus hat er für jedes Steuerelement des jeweiligen Formulars eine Eigenschaft, die denselben Namen wie es trägt. Sie verweist auf Objekte, die wiederum über eine Eigenschaft $dirty verfügen. Letztere gibt Aufschluss darüber, ob das Formularfeld geändert wurde – $pristine zeigt erneut das Gegenteil an.

Folgendes Beispiel demonstriert das, indem es die genannten Eigenschaften sowohl auf Formular- als auch auf Steuerelementebene anzeigt.

<div ng-app="flug">

    <form novalidate ng-controller="editFlugCtrl" name="form" id="form">

        <div>FlugNummer</div>
        <div><input ng-model="vm.flugNummer" name="flugNummer"/></div>
        
        <div>
            <b>Dirty (form):</b> {{ form.$dirty }}
        </div>
        <div>
            <b>Pristine (form):</b> {{ form.$pristine }}
        </div>

        <div>
            <b>Dirty (flugNummer):</b> {{ form.flugNummer.$dirty }}
        </div>
        <div>
            <b>Pristine (flugNummer):</b> {{ form.flugNummer.$pristine }}
        </div>


        ...

    </form>
</div>

Neben den genannten weist der Form Controller für das Formular und die einzelnen Steuerelemente auch Eigenschaften auf, die darüber informieren, ob sich das Formular beziehungsweise das Steuerelement erfolgreich validieren ließ und welche Fehler dabei aufgetreten sind.

Vordefinierte Validierungslogiken

Zum Validieren von Eingaben bietet AngularJS einige vordefinierte Logiken. Sie werden unter anderem durch das Setzen des Attributs type bei den verwendeten Input-Elementen aktiviert. Die hier betrachtete Version unterstützt die folgenden Werte für type: text, number, url und email.

Darüber hinaus kann der Entwickler mit der Eigenschaft required angeben, ob es sich bei einem Feld um ein Pflichtfeld handelt, und mit den Direktiven ng-minlength und ng-maxlength kann er die minimale und maximale Länge des eingegebenen Texts definieren. Zudem steht noch ng-pattern zur Verfügung, welche die Eingabe anhand eines regulären Ausdrucks validiert (siehe auch unten folgendes Codebeispiel). Es verwendet das Attribut novalidate, das eine eventuelle Validierung, die der Browser auf eigene Faust – zum Beispiel unter Berücksichtigung der Angaben im type-Attribut – durchführt, verhindert.

Das Attribut wirkt sich jedoch nicht auf die Validierung durch AngularJS aus. Beachtenswert ist, dass der an ng-pattern übergebene reguläre Ausdruck, wie bei JavaScript üblich, zwischen zwei Schrägstrichen zu platzieren ist.

Mehr Infos

Artikelreihe "Single Page Applications mit AngularJS"

Artikel 1: Erste Schritte
Artikel 2: Konzepte näher betrachtet
Artikel 3: Unit-Testing
Artikel 4: Validieren und Internationalisierung
Artikel 5: Routing und Deep-Linking

Unter Verwendung des Form Controller prüft das betrachtete Beispiel zudem, ob sich das Steuerelement erfolgreich validieren ließ. Dazu greift es auf die Eigenschaft form.flugNummer.$invalid zu. Eine Fehlermeldung gibt es jedoch nur, wenn der Benutzer zusätzlich den Wert im Eingabefeld geändert hat. Ob das der Fall ist, wird über die Eigenschaft form.flugNummer.$dirty geprüft. Weisen beide Elemente den Wert true auf, gibt das Programm eine Fehlermeldung aus.

Das Gegenteil von $invalid beschreibt die Eigenschaft $valid, wobei beide auch direkt innerhalb des Form Controller existieren. Dort geben sie darüber Auskunft, ob sich sämtliche Felder im Formular erfolgreich validieren ließen.