Formularverarbeitung

Formularverarbeitung

0:00 Bis jetzt haben wir Daten angezeigt. Heute drehen wir die Richtung um und nehmen welche entgegen. Formulare sind der Ort, an dem Ihre Anwendung mit echten Menschen in Berührung kommt — und deshalb der Ort, an dem sich Sorgfalt am deutlichsten auszahlt. Wir sehen uns an, wie Vue die Eingabe an den Zustand bindet, was hinter der bekannten Abkürzung dafür wirklich steckt, wie man sinnvoll prüft und wie man ein Formular so aufbaut, dass es auch bei zwanzig Feldern beherrschbar bleibt.

Grundlagen der Formularverarbeitung in Vue-Anwendungen

0:27 Fangen wir mit einem Denkwechsel an, der wichtiger ist als jede Syntax. Wer aus der klassischen Webentwicklung kommt, hat gelernt: Das Formular hält die Daten, und beim Absenden liest man sie aus. In einer Vue-Anwendung ist es umgekehrt. Diese Umkehrung klingt zunächst nach einem Detail, verändert aber alles Weitere — Vorbelegen, Zurücksetzen, Prüfen.

0:48 Nehmen wir uns kurz Zeit dafür, bevor wir die erste Zeile schreiben. Stellen Sie sich ein Formular als Schaufenster vor, nicht als Lager. Im Lager liegen die Waren — das ist Ihr Zustand. Das Schaufenster zeigt sie und meldet, wenn jemand etwas ändert. Beim Absenden gehen Sie also nicht zum Schaufenster und lesen die Etiketten ab, Sie greifen ins Lager.

1:11 Praktisch heißt das: Kein Zugriff auf einzelne Eingabefelder, kein Auslesen des Dokuments beim Absenden. Der Wert liegt bereits vor, und zwar in der Form, in der Sie ihn brauchen. Das klingt banal, spart aber überraschend viel Code. Die vier Punkte beschreiben vier Alltagsaufgaben, die in der alten Welt jeweils eigene Handgriffe brauchten. Vorbelegen hieß dort, Attribute zu schreiben.

1:35 Zurücksetzen hieß, Felder einzeln zu leeren. In der neuen Welt ist beides dasselbe: Sie setzen den Zustand. Der letzte Punkt ist der, der sich beim Testen auszahlt — Prüfungen laufen auf Werten und nicht auf Formularfeldern. Sie können also die Prüflogik aufrufen, ohne dass irgendwo ein Browser läuft. Das macht aus einer mühsamen Aufgabe eine gewöhnliche Funktion.

1:57 Das ist die Vorlage, die Sie hunderte Male schreiben werden: Zustand, Bindung, Absendefunktion. Achten Sie auf den Zusatz am Formular-Ereignis. Ohne ihn tut der Browser, was er seit dreißig Jahren tut — er schickt das Formular ab und lädt die Seite neu. In einer Single Page Application bedeutet das: Ihr gesamter Zustand ist weg, die Anwendung startet neu.

2:18 Es ist der häufigste Anfängerfehler in diesem Bereich, und er sieht aus wie ein Absturz, obwohl der Browser sich völlig korrekt verhält. Der zweite Punkt überrascht viele: Ein Startwert im Markup wird ignoriert. Wenn Sie ein Feld mit einem Wert vorbelegen wollen, gehört der in den Zustand, nicht ins Attribut. Der dritte Punkt ist eine Beobachtung, die man kennen sollte: Der Zustand aktualisiert sich bei jedem Tastenanschlag.

2:44 Das ist meistens genau richtig, kann aber bei aufwendigen Ableitungen spürbar werden — dafür gibt es einen Modifikator, den wir gleich kennenlernen. Und der letzte Punkt ist reines HTML-Wissen, das trotzdem regelmäßig zuschlägt.

Unterschiede zwischen v-bind und v-on gegenüber v-model

2:58 Jetzt sehen wir hinter die Kulissen. Es gibt in Vue eine Direktive, die Ihnen Formulararbeit fast vollständig abnimmt — und sie hat den Ruf, magisch zu sein. Das ist sie nicht. Sie ist eine Abkürzung für zwei Dinge, die Sie beide schon kennen. Wer die Auflösung einmal gesehen hat, versteht danach auch die Fälle, in denen die Abkürzung nicht ausreicht, und weiß sofort, was er stattdessen tun muss.

3:22 Die Abkürzung besteht aus zwei Teilen: einer Bindung, die den Wert ins Feld schreibt, und einem Listener, der die Eingabe zurück in den Zustand schreibt. Zwei Richtungen, deshalb der Name Zwei-Wege-Bindung. Interessant ist der letzte Satz: Welche Eigenschaft und welches Ereignis dabei verwendet werden, hängt vom Elementtyp ab.

3:40 Bei einem Textfeld ist es etwas anderes als bei einer Checkbox. Genau deshalb funktioniert dieselbe Direktive auf sehr verschiedenen Feldern — Vue setzt jeweils das Passende ein. Hier stehen beide Formen untereinander, und ich möchte, dass Sie einmal genau hinsehen: Oben die ausgeschriebene Fassung, unten die Abkürzung. Sie tun exakt dasselbe.

4:01 Der einzige Unterschied ist, dass Sie unten weniger tippen. Warum ich darauf herumreite: Sobald Sie das gesehen haben, verliert die Abkürzung ihren magischen Anstrich. Und Sie wissen, was zu tun ist, wenn Sie zwischen Eingabe und Zustand noch etwas einschieben wollen — Sie schreiben einfach wieder die obere Form und ergänzen im Handler Ihre Logik.

4:21 Drei Zeilen, drei Elementgruppen. Textfelder arbeiten mit dem Wert und reagieren auf jede Eingabe. Ankreuzfelder und Auswahlknöpfe arbeiten mit dem Auswahlzustand und reagieren erst auf die Änderung. Auswahllisten liegen dazwischen. Sie müssen sich das nicht merken — Vue trifft die richtige Wahl automatisch. Wichtig ist nur, dass Sie wissen, dass es Unterschiede gibt.

4:43 Denn sie erklären, warum bei manchen Feldern der Zustand sofort nachzieht und bei anderen erst, wenn Sie das Feld verlassen. Der zweite Punkt ist ein Fehler, den man beim Umbauen macht: Man ergänzt eine zusätzliche Wertbindung neben der Abkürzung — und hat damit zwei Stellen, die denselben Wert setzen. Das Ergebnis ist ein Feld, das sich merkwürdig verhält.

5:04 Der dritte Punkt betrifft asiatische Eingabemethoden: Dort wird ein Zeichen aus mehreren Anschlägen zusammengesetzt, und die Abkürzung aktualisiert währenddessen nicht. Wer eine Anwendung für solche Sprachen baut, braucht die ausgeschriebene Form mit einem eigenen Listener.

Zwei Wege zur Formularbindung im Vergleich

5:20 Wir haben jetzt zwei Wege gesehen, und die naheliegende Frage lautet: Wann nehme ich welchen? Ich möchte Ihnen dafür keine Regel geben, sondern eine Entscheidungshilfe — denn beide Wege sind legitim, und die Antwort hängt davon ab, was zwischen Eingabe und Zustand passieren soll. In den allermeisten Fällen ist die Sache aber schnell entschieden.

5:39 Wichtig ist, dass Sie die Entscheidung bewusst treffen und nicht aus Gewohnheit — denn beide Fehlerrichtungen kosten: unnötige Handarbeit macht Formulare lang, fehlende Handarbeit macht sie starr. Die Empfehlung steht gleich im zweiten Satz: Die Abkürzung ist der Alltagsweg. Nehmen Sie sie, solange nichts dagegen spricht.

5:57 Interessant ist die Aufzählung am Ende — vier Situationen, in denen die ausgeschriebene Form gewinnt: umformen, prüfen, verwerfen, verzögern. Das Verwerfen ist dabei der wichtigste Fall, denn dafür gibt es keinen Modifikator. Wenn ein Feld bestimmte Zeichen gar nicht erst annehmen soll, brauchen Sie einen eigenen Handler, der entscheidet, ob er den Zustand überhaupt setzt.

6:20 Fünf Zeilen, und die dritte ist die aussagekräftigste: Eingabe ablehnen. Bei der Abkürzung geht das nicht — sie schreibt jede Eingabe in den Zustand, und Sie können danach höchstens korrigieren. Das sieht für den Tippenden unschön aus, weil das Zeichen kurz erscheint und wieder verschwindet. Bei der ausgeschriebenen Form entscheidet Ihr Handler, ob er den Zustand setzt — und was er nicht setzt, erscheint gar nicht erst.

6:44 Der Hinweis unten bleibt: Im Zweifel die Abkürzung, und erst auflösen, wenn ein konkreter Grund auftritt. Der zweite Punkt ist der, auf den es mir ankommt: Eigene Komponenten mit Zwei-Wege-Bindung beruhen genau auf diesem Muster. Wenn Sie im nächsten Kapitel ein eigenes Eingabefeld bauen, ist das nichts anderes als eine Bindung plus ein gemeldetes Ereignis — nur in eine Komponente verpackt.

7:08 Wer die Auflösung kennt, versteht das sofort. Wer sie nicht kennt, lernt eine weitere magische Regel auswendig. Und der letzte Punkt gilt immer: Fehlersuche gelingt nur, wenn man weiß, was ein Werkzeug erzeugt. Diese Aufgabe hat einen doppelten Zweck. Sie schreiben die Auflösung einmal selbst — das festigt, was wir gerade besprochen haben.

7:29 Und Sie bauen dabei etwas ein, das mit der Abkürzung nicht geht: einen Eingabefilter. Das Erfolgskriterium ist bewusst streng formuliert: Nicht-numerische Eingaben sollen gar nicht erst erscheinen. Wenn ein Buchstabe kurz aufblitzt und dann verschwindet, haben Sie korrigiert statt abgelehnt — und das ist ein spürbarer Unterschied für den, der tippt.

7:49 Der zweite Punkt beschreibt einen Fehler mit einem sehr eindeutigen Symptom: Sie tippen, und im Feld passiert nichts. Die Ursache ist fast immer dieselbe — ein Handler, der den Zustand nicht setzt. Das Feld zeigt ja den Zustand an, und wenn der sich nicht ändert, bleibt auch die Anzeige stehen. Der letzte Punkt ist eine Erfahrung aus der Praxis: Verzögertes Setzen, etwa mit einer Entprellung direkt am Feld, fühlt sich beim Tippen sofort hakelig an.

8:15 Entprellen Sie lieber die Folgeaktion, nicht die Anzeige.

Zweiwege Datenbindung mit v-model verstehen

8:19 Jetzt gehen wir über das einfache Textfeld hinaus. Die Abkürzung bringt drei eingebaute Zusätze mit, die kleine Alltagsprobleme lösen, und sie funktioniert auch auf eigenen Komponenten. Letzteres ist der spannendere Teil — damit können Sie eigene Eingabebausteine bauen, die sich von außen genauso anfühlen wie ein normales Feld.

8:39 Seit Vue 3.4 ist das erfreulich wenig Arbeit — vorher war es deutlich mühsamer, und genau diesen älteren Weg werden Sie in Bestandsprojekten noch antreffen. Wir sehen uns deshalb beide Seiten an: die kurze Schreibweise und das, wozu sie sich auflöst. Der Kern dieses Kapitels ist das Makro, das in der Komponente den Wert entgegennimmt.

8:59 Was es tut, klingt komplizierter, als es ist: Es legt die Eingabe an, es legt das passende Meldeereignis an, und es gibt Ihnen einen Wert zurück, mit dem Sie arbeiten wie mit lokalem Zustand. Sie schreiben also einfach hinein — und die Komponente meldet die Änderung nach außen, ohne dass Sie das ausformulieren müssen. Das ist eine der angenehmsten Vereinfachungen der letzten Vue-Versionen.

9:22 Drei kleine Helfer für drei häufige Ärgernisse. Der erste verzögert die Aktualisierung, bis das Feld verlassen wird — praktisch bei langen Texten oder teuren Ableitungen. Der zweite wandelt in eine Zahl um, und das ist wichtiger, als es klingt: Formularfelder liefern immer Zeichenketten, und ein Vergleich zwischen Zeichenkette und Zahl geht schief.

9:41 Der dritte schneidet Leerraum ab, was bei Namen und Codes fast immer erwünscht ist. Der Hinweis unten spart Tipparbeit: Bei einem Zahlenfeld wirkt die Umwandlung automatisch. Sehen Sie sich an, wie wenig hier steht. Eine Zeile im Skript, und die Komponente verhält sich nach außen wie ein Eingabefeld. Sie können den Wert direkt erhöhen und verringern — die Meldung nach außen passiert von selbst.

10:04 Verwendet wird die Komponente danach genau wie ein normales Feld, mit derselben Direktive. Das ist der Punkt, an dem eigene Bausteine sich nahtlos einfügen: Wer die Komponente benutzt, muss nicht wissen, dass sie selbstgebaut ist. Diese Tabelle ist der Blick unter die Haube, und sie schließt den Bogen zu Kapitel zwei. Was das Makro erzeugt, ist eine ganz gewöhnliche Eingabe plus ein ganz gewöhnliches Ereignis — genau das Muster, das Sie schon kennen.

10:30 Die dritte Zeile ist praktisch: Sie können dem Ganzen einen Namen geben. Damit sind auch mehrere Zwei-Wege-Bindungen an derselben Komponente möglich, etwa Vorname und Nachname getrennt. Jede bekommt ihre eigene Eingabe und ihr eigenes Ereignis, und von außen sieht es aus wie zwei normale Bindungen. Der erste Punkt ist eine historische Einordnung, die Ihnen beim Lesen fremden Codes hilft.

10:53 Vor Vue 3.4 brauchte man für dasselbe drei Bausteine: die Eingabe deklarieren, das Ereignis deklarieren und einen schreibbaren abgeleiteten Wert dazwischenschalten. Das war viel Standardcode für einen einfachen Zweck, und Sie werden ihn in älteren Projekten noch finden. Wichtig zu wissen: Die Auflösung dahinter ist unverändert.

11:12 Es ist wirklich nur die Schreibarbeit, die entfallen ist — nicht die Mechanik. Der erste Punkt ist eine Falle, die in JavaScript häufiger vorkommt, als man denkt: Ein Vorgabewert, der ein Objekt oder ein Array ist, wird von allen Instanzen geteilt. Zwei Komponenten auf der Seite arbeiten dann auf demselben Objekt, und keiner versteht, warum sich beide gleichzeitig ändern.

11:34 Die Lösung ist immer dieselbe: Der Vorgabewert kommt aus einer Funktion. Der dritte Punkt ist eine kleine Gemeinheit: Die Umwandlung in eine Zahl liefert bei leerer Eingabe keinen Nullwert, sondern einen leeren String.

Formulareingaben validieren

11:48 Jetzt zum Prüfen. Ich zeige Ihnen bewusst kein Framework, sondern ein Muster — und zwar eines, das mit den Werkzeugen auskommt, die Sie längst kennen. Denn Validierung ist im Kern nichts anderes als ein abgeleiteter Wert. Wer das verstanden hat, kann jederzeit auf eine Bibliothek wechseln und weiß dann auch, was sie ihm eigentlich abnimmt.

12:07 Für einen großen Teil der Formulare, die Sie bauen werden, brauchen Sie sie schlicht nicht. Der entscheidende Gedanke: Aus dem Eingabezustand wird ein Fehlerzustand abgeleitet. Nicht berechnet und gespeichert, sondern abgeleitet — und damit immer aktuell, ohne dass Sie irgendwo nachziehen müssten. Der praktische Gewinn steht am Ende: Die Prüfung ist ohne Formular testbar. Sie geben ihr Werte, sie gibt Ihnen Fehler zurück.

12:33 Kein Browser, kein Klicken, keine Simulation von Eingaben. Das ist der Punkt, an dem sich die Trennung zwischen Zustand und Anzeige richtig auszahlt. Zwei Ableitungen, und die zweite ist eine Ableitung aus der ersten. Oben entsteht ein Objekt mit den Feldern, die etwas zu beanstanden haben, unten daraus die Antwort auf die Frage, ob das Formular insgesamt gültig ist.

12:56 Diese zweite steuert danach direkt den Absende-Knopf. Sehen Sie sich an, was hier nicht passiert: Nichts wird gespeichert, nichts wird umgeschaltet, es wird nur gerechnet. Bei jeder Tastatureingabe rechnet Vue neu und nur dann. Mehr Mechanik braucht es für einen Großteil aller Formulare nicht. Fünf Schritte, und der letzte ist der wichtigste — obwohl er in der Anwendung gar nicht sichtbar wird. Die Prüfung im Browser ist Komfort.

13:22 Sie sorgt dafür, dass niemand ein halbes Formular abschickt und dreißig Sekunden auf eine Fehlermeldung wartet. Verbindlich prüfen muss der Server, denn den Browser kontrollieren Sie nicht. Jeder kann die Anfrage von Hand stellen. Schritt drei ist der, den man aus Nutzersicht ernst nehmen sollte: Meldungen gehören an das Feld, nicht in einen Kasten am Seitenanfang.

13:44 Das ist der Punkt, an dem sich gute von schlechten Formularen unterscheiden. Ein frisch geöffnetes Formular hat lauter leere Pflichtfelder — technisch also lauter Fehler. Wenn Sie die alle sofort rot anzeigen, begrüßen Sie Ihre Nutzer mit einem Vorwurf, bevor sie ein Zeichen getippt haben. Der letzte Punkt löst das elegant: Der Fehlerzustand darf berechnet sein, ohne schon sichtbar zu sein.

14:06 Sie rechnen also von Anfang an, zeigen aber erst nach dem Verlassen des Felds oder nach dem ersten Absendeversuch. Der erste Punkt ist eine Warnung vor einem verbreiteten Muster: Prüfungen in einem Beobachter statt in einer Ableitung. Das funktioniert scheinbar, führt aber leicht zu Schleifen, weil der Beobachter Zustand schreibt, der wiederum beobachtet wird. Eine Ableitung kann das gar nicht.

14:29 Der zweite Punkt ist eine Wechselwirkung, die überrascht: Die eingebaute Browserprüfung greift nur, wenn das Absenden nicht abgefangen wird — und das fangen wir ja immer ab. Sie ist damit in einer Vue-Anwendung praktisch wirkungslos.

Arbeiten mit verschiedenen Input-Typen

14:43 Bisher ging es um Textfelder. Jetzt kommen die anderen: Ankreuzfelder, Auswahlknöpfe, Auswahllisten. Bei denen gibt es eine Besonderheit, die man kennen muss — der gebundene Wert hat je nach Situation einen anderen Typ. Wer das nicht weiß, wählt einen falschen Startwert und wundert sich, warum die Bindung nicht funktioniert, ohne dass irgendwo ein Fehler erscheint.

15:04 Das ist eine der wenigen Stellen in Vue, an denen etwas wirklich stumm scheitert — deshalb sehen wir sie uns genau an. Die Regel lautet: Der Typ hängt vom Kontext ab. Ein einzelnes Ankreuzfeld liefert einen Wahrheitswert — an oder aus. Mehrere Ankreuzfelder, die auf denselben Zustand zeigen, füllen dagegen ein Array mit den angekreuzten Werten.

15:26 Das ist eine elegante Lösung, aber sie setzt voraus, dass Sie den Startwert richtig wählen. Wer dort einen Wahrheitswert hinschreibt, wo ein Array hingehört, bekommt ein Feld, das sich einfach nicht ankreuzen lässt — ohne jede Meldung. Vier Varianten in einem Block. Oben ein einzelnes Ankreuzfeld, darunter zwei, die sich einen Zustand teilen — die füllen gemeinsam ein Array.

15:49 Dann ein Auswahlknopf und eine Auswahlliste. Achten Sie auf die Fußzeile: Die Reihenfolge im Array folgt dem Anklicken, nicht der Reihenfolge im Markup. Wenn Sie die Werte sortiert brauchen, sortieren Sie beim Auslesen. Und beachten Sie, was bei den Auswahlknöpfen fehlt: ein name-Attribut. In Vue macht der geteilte Zustand die Gruppe, nicht das Attribut.

16:12 Diese Tabelle sollten Sie sich merken oder zumindest wiederfinden können, denn die mittlere Spalte ist die häufigste Fehlerquelle in diesem Kapitel. Der Startwert muss zum erwarteten Typ passen. Ein Array beginnt leer, ein Wahrheitswert beginnt bei falsch, eine Auswahl beginnt mit einem leeren String. Nehmen Sie stattdessen einen Nullwert, weil das ja auch leer ist, funktioniert die Bindung nicht — und Sie suchen den Fehler im Markup.

16:36 Der Hinweis unten ist für Sonderfälle: Eigene Wahrheitswerte lassen sich setzen. Der Regelfall in einer echten Anwendung: Die Optionen kommen aus Daten, nicht aus dem Markup. Zwei Details lohnen den Blick. Erstens die gebundene Wertangabe — ohne sie würde der angezeigte Text als Wert verwendet, und Sie hätten Namen statt Kennungen im Zustand.

16:57 Zweitens die deaktivierte Leeroption ganz oben. Die ist mehr als Kosmetik: Auf iOS entsteht ohne sie unter Umständen gar kein Änderungsereignis, wenn der Nutzer die erste Option wählt. Ein kleines Detail mit großem Ärgerpotenzial. Der erste Punkt fasst zusammen, was wir eben besprochen haben, und ich betone das Wort stumm: Es gibt keine Fehlermeldung.

17:19 Der zweite Punkt ist der zweite Klassiker: Ohne gebundene Wertangabe zählt der Textinhalt der Option. Der letzte Punkt ist eine Wechselwirkung mit Modul 3: Sie dürfen Objekte als Optionswert verwenden — das funktioniert. Aber Sie können dasselbe Objekt nicht als Schlüssel für die Schleife nehmen, denn der muss ein einfacher Wert sein. Nehmen Sie dafür die Kennung.

Formularzustände und Benutzerinteraktionen steuern

17:41 Ein Formular hat mehr Zustände, als man zunächst denkt. Neben den eingegebenen Werten gibt es Fragen wie: Wird gerade gesendet? Hat der Nutzer schon einmal abgeschickt? Wurde dieses Feld überhaupt angefasst? Diese Zustände steuern, was der Nutzer sieht — und sie gehören genauso sauber verwaltet wie die Werte selbst. Wir sehen uns die vier wichtigsten an.

18:02 Sie kosten wenig Aufwand und machen den Unterschied zwischen einem Formular, das sich solide anfühlt, und einem, bei dem man nach dem Klick ins Leere schaut. Der Gedanke ist einfach: Alles, was die Anzeige steuert, gehört in den Zustand — nicht nur die Werte. Ob ein Knopf gesperrt ist, ob eine Meldung erscheint, ob ein Ladehinweis läuft: Das sind Zustände, und sie sollten benannt sein.

18:25 Die Alternative ist, das aus anderen Dingen abzuleiten oder direkt am Element zu schalten, und beides wird schnell unübersichtlich. Der Aufwand ist gering — es sind drei, vier zusätzliche Werte — und der Gewinn ist ein Formular, dessen Verhalten man beim Lesen versteht. Das ist das Muster für jeden Absendevorgang. Drei Dinge lohnen die Aufmerksamkeit. Erstens die Prüfung ganz oben — nie darauf vertrauen, dass der gesperrte Knopf schon reicht.

18:52 Zweitens die Sperre, die vor dem Aufruf gesetzt wird. Drittens, und das ist der wichtigste Teil, das finally. Es gibt den Knopf auch dann wieder frei, wenn der Aufruf fehlschlägt. Ohne diesen Zweig bleibt das Formular nach einem Serverfehler dauerhaft gesperrt, und der Nutzer muss die Seite neu laden. Vier Zustände, vier Aufgaben. Der erste ist der, ohne den ein Doppelklick zwei Datensätze erzeugt — und das passiert häufiger, als man denkt, gerade bei langsamen Verbindungen.

19:21 Der zweite und der dritte gehören zur Frage von vorhin, wann Fehler sichtbar werden. Der vierte trennt sauber zwischen Fehlern, die aus den Eingaben kommen, und solchen, die vom Server kommen. Die gehören nämlich an verschiedene Stellen: Feldfehler ans Feld, Serverfehler über das Formular. Fünf Schritte, und Schritt drei ist der, den ich Ihnen besonders ans Herz lege: Bei einem Fehler bleiben die Eingaben stehen.

19:46 Es gibt kaum etwas Frustrierenderes, als ein sorgfältig ausgefülltes Formular abzuschicken, eine Fehlermeldung zu bekommen und alles wieder von vorn eintippen zu müssen. Schritt fünf ist der Feinschliff, den viele weglassen: den Fokus auf das erste fehlerhafte Feld setzen. Das ist eine Zeile Code und erspart dem Nutzer die Suche nach dem markierten Feld.

20:06 Der zweite Punkt ist ein Rückfall in alte Gewohnheiten: das Zurücksetzen über das Formularelement. Das leert zwar die Felder im Dokument, aber Ihr Zustand bleibt, wie er war — und beim nächsten Rendern stehen die alten Werte wieder da. Zurückgesetzt wird der Zustand, nichts anderes. Der letzte Punkt ist eine Bitte für die Gestaltung: Ein gesperrter Knopf ohne erkennbaren Grund wirkt wie ein Fehler der Anwendung.

20:30 Sagen Sie dazu, was fehlt — dann ist die Sperre hilfreich statt ärgerlich.

Best Practices für Formularlogik in Vue-Komponenten

20:35 Zum Abschluss die Frage, an der sich entscheidet, ob ein Formular auch bei zwanzig Feldern noch handhabbar ist: Wo wohnt welche Logik? Formulare wachsen schneller als andere Komponenten, weil ständig ein Feld dazukommt. Es lohnt sich, von Anfang an eine Aufteilung zu haben, die dieses Wachstum aushält — und sie besteht aus erfreulich wenigen Regeln.

20:55 Drei Sätze, mehr ist es nicht, und danach ist das Wachstum eines Formulars kein Problem mehr, sondern nur noch Fleißarbeit. Drei Aussagen, und alle drei sind einfach umzusetzen. Erstens: Die Werte liegen zusammen in einem Objekt, nicht als zwanzig einzelne Variablen. Das macht Zurücksetzen, Übergeben und Kopieren zu einer Zeile statt zu zwanzig. Zweitens: Die Prüfungen stehen daneben als Ableitung.

21:20 Drittens, und das ist der inhaltliche Kern: Die Felder selbst zeigen an und melden — sie kennen den Ablauf nicht. Ein Eingabefeld, das weiß, dass es zu einem Anlegen-Formular gehört, ist kein Baustein mehr. Fünf Zeilen, und die letzte deutet voraus auf das nächste Modul: Was Sie in zwei Formularen brauchen, gehört in eine wiederverwendbare Funktion.

21:42 Die Fußzeile nennt einen praktischen Grund für die erste Zeile, den man leicht übersieht: Ein Formular mit zwanzig einzelnen Werten lässt sich nicht in einem Stück übergeben. Sobald Sie es an eine Speicherfunktion reichen oder mit dem ursprünglichen Stand vergleichen wollen, hätten Sie zwanzig Argumente. Mit einem Objekt ist es eines.

22:02 Der erste Punkt beschreibt den häufigsten Fall: Dasselbe Feld erscheint im Anlegen- und im Bearbeiten-Formular. Wenn es weiß, was beim Absenden passiert, brauchen Sie zwei Fassungen davon. Der dritte Punkt ist der subtilere: Wenn jedes Feld seine eigenen Regeln mitbringt, sind die Prüfregeln über die ganze Anwendung verteilt.

22:20 Sie können dann nicht mehr an einer Stelle nachsehen, was ein Formular verlangt. Der letzte Satz fasst es: Das Formular kennt den Zusammenhang, das Feld nur seinen Wert. Diese Aufgabe ist eine Aufräumaufgabe, und die Prüfkriterien sind bewusst als Verbote formuliert: keine Prüfregeln in den Feldern, keine Speicheraufrufe in den Feldern.

22:40 Was übrig bleibt, ist ein Formular mit einem Wertobjekt und einer Absendefunktion — mehr braucht es nicht. Der Hinweis unten ist ein Ausblick: Wenn Sie dabei merken, dass Sie dieselben Regeln in zwei Formularen brauchen, haben Sie einen Kandidaten für eine wiederverwendbare Funktion gefunden. Genau darum geht es im nächsten Modul.

22:59 Der erste Punkt ist eine Warnung, die über Formulare hinausgeht: Eine Bibliothek löst kein Strukturproblem. Wer ein unaufgeräumtes Formular mit einer Prüfbibliothek versieht, hat danach ein unaufgeräumtes Formular mit einer zusätzlichen Abhängigkeit. Der dritte Punkt ist eine Falle, die man erst bemerkt, wenn es zu spät ist: Formularzustand im globalen Speicher abzulegen macht zwei gleichzeitig geöffnete Formulare unmöglich.

23:24 Und genau das kommt vor, sobald irgendwo ein Dialog auftaucht.

Formulare beherrschbar halten

23:28 Fassen wir zusammen. Der Zustand ist die Wahrheit, das Formular nur seine Sicht — daraus folgt fast alles Übrige. Die bekannte Abkürzung ist Bindung plus Listener, und die Auflösung zu kennen zahlt sich in genau den Fällen aus, in denen die Abkürzung nicht reicht. Prüfungen sind Ableitungen und gehören entsprechend formuliert.

23:47 Im nächsten Modul gehen wir eine Ebene tiefer und sehen uns die Reaktivität an, auf der das alles beruht — inklusive der Regeln, die dabei gelten.