Inhaltsverzeichnis


Nichts verpassen?

angularjs | Johannes Millan ÔÇó | 3 Minuten

Einfaches Formular-Handling mit ng-fab-form

Wer schon einmal mit Formularen in einer AngularJS-App gearbeitet hat, kennt das:

  • Nicht validierte Formulare lassen sich absenden.
  • Der bei einigen Nutzern immer noch beliebte Doppelklick auf den Submit-Button f├╝hrt zum zweimaligen Absenden des Formulars.
  • Fehlermeldungen m├╝ssen jedes Mal aufwendig mit Hilfe der Name-Attribute und zus├Ątzlichen Markup neu konfiguriert werden..

Die Chancen stehen gut, dass man sich mehr als einmal dabei erwischt, etwas vergessen zu haben. Im Besten Fall leidet die Nutzererfahrung, im schlimmsten Fall f├╝hren die doppelt oder falsch abgesendeten Daten zu schwer nachvollziehbaren Fehlern.

Die Tools, um das Formular-Handling nach den Vorstellungen anzupassen, sind zwar alle vorhanden, aber die Benutzung gestaltet sich gef├╝hlt durchaus aufwendig. Das Modul ng-fab-form versucht dieses Problem anzugehen, indem es eine globale Konfiguration von Formularen innerhalb eurer App erlaubt.

So sieht es aus:

Installation und Verwendung

Um ng-fab-form zu benutzen m├╝sst ihr es nur installieren und in eurem app-Modul laden (Achtung, AngularJS 1.3 wird aufgrund der Abh├Ąngigkeit zu ngMessages ben├Âtigt):

Die Installation erfolgt, wie gewohnt, ├╝ber Bower:

bower install ng-fab-form --save

Anschlie├čend m├╝ssen ngFabForm und ngMessages in eurem App-Modul geladen werden.

angular.module('yourApp', ['ngFabForm', 'ngMessages' ]);

Benutzung der Validierung am Beispiel eines Eingabefeldes

Um die Validierung zu verwenden m├╝ssen zwei Vorraussetzungen erf├╝llt sein.

  1. Muss sich eurer input-Feld innerhalb eines eines form-Elements befinden
  2. Muss ng-model verwendet werden:
  3. Eine mit ng-model kompatible Validierungs-Direktive, wie etwa required, ng-pattern oder maxlength muss gesetzt sein.
<form name="yourFormName" ng-submit="someSubmitFn()">
  <input type ="text" ng-model="a.model.here" required>
  <button type="submit">Send me!</button>
</form>

Dieses html wird, wenn man die default-Einstellungen verwendet, automatisch in folgendes transformiert:

<form name="yourFormName" ng-submit="someSubmitFn()">
    <input type ="text"
            ng-model="aModelHere"
            name="yourFormName_a_model_here"
            required>
    <div>
        <div ng-messages="field.$error">
            <ul class="list-unstyled validation-errors"
                ng-show="field.$invalid && (field.$touched || field.$dirty || form.$triedSubmit)">
                <li ng-message="required">This field is required</li>
                <!-- other messages -->
            </ul>
            <div class="validation-success"
                  ng-show="field.$valid && !field.$invalid"></div>
        </div>
        <div class="validation-success" ng-show="field.$valid  && !field.$invalid"></div>
    </div>
    <button type="submit">Send me!</button>
</form>

Doppelte Submits und das Absenden von invaliden Formularen werden dabei entsprechend eurer Einstellungen automatisch gehandelt.

Was ng-fab-form anders macht als andere Form-Module

Die gro├če Anzahl von Modulen, die sich einem vereinfachten Form-Handling widmen, zeigt, dass die Probleme mit Formularen in Angular nicht ganz neu sind. Im wesentlichen gibt es dabei bisher zwei Arten von Modulen (auf weitere Beispiele k├Ânnt Ihr gerne in den Kommentaren verweisen): Form-Builder und Validation-Helper. Erstere sind dabei h├Ąufig recht unflexibel, da Sie vom Markup abstrahieren und dieses automatisch nach bestimmten Regeln generieren. Letztere erfordern normalerweise das Verwenden von bestimmten Direktiven, die zwar einfacher zu verwenden sind als das Standard-Markup, aber f├╝r gew├Âhnlich trotzdem immer wieder neu aufgerufen werden m├╝ssen.

ng-fab-form hingegen ist demgegen├╝ber kein Form-Builder oder Framework und es erfordert - evtl. abgesehen von einer einmaligen Anpassung der Konfiguration - kein zus├Ątzliches Markup. Das Modul l├Ądt dabei mit einer Reihe sinnvoller Default-Einstellungen, l├Ąsst sich aber bei Bedarf umfassend konfigurieren und anpassen, auch f├╝r etwaitige Ausnahmef├Ąlle. Die vorhandenen M├Âglichkeiten sprengen hier leider den Rahmen. Eine gute ├ťbersicht findet sich allerdings auf der github-Seite.

Weitere Features

Neben den bereits angesprochenen Funktionen gibt eine Reihe von weiteren vollst├Ąndig konfigurierbaren Features:

  • Einfache Implementierung eigener Validierungs-Nachrichten, sowie eine Vorlage f├╝r eigene Themes
  • Direktive zum Deaktivieren ganzer Formulare
  • Auto-Scroll-To & Fokus des ersten nicht erfolgreich validierten Feldes beim Absenden des Formulars
  • Eine Direktive zur Einbindung von kontext-spezifischen Validierungs-Nachrichten z.B. f├╝r ngPattern.
  • Automatisches triggern von $setDirty f├╝r alle Formularfelder bei einem versuchten Submit
  • Automatisches setzen des novalidate-Atributes f├╝r Formulare

Eine vollst├Ąndige ├ťbersicht findet sich ebenfalls auf der github-Seite.