Dynamisches Formular

Was ist ein dynamisches Formular?

Ein dynamisches Formular baut seine Eingabefelder aus Daten statt aus festem Markup. Statt von Hand ein Textfeld, dann ein E-Mail-Feld, dann ein Textbereich zu schreiben, hältst du ein Array von Felddefinitionen und lässt eine Komponente rendern, was dieses Array beschreibt. Ändere die Daten und das Formular ändert sich; die Komponente bleibt gleich.

Das ist die ganze Idee, und es lohnt sich, dabei präzise zu sein. Die Feldmenge löst sich weiterhin zu einer konkreten Liste von Eingaben auf, in dieser Vorlage ein Name, eine E-Mail und eine Nachricht, und postet einmal an Formpaste als eine einzige Einsendung. Dynamisch ist, woher diese Eingaben kommen: ein Schema, das du bearbeiten kannst, nicht JSX oder Template-Markup, das du jedes Mal anfassen musst, wenn ein Feld hinzugefügt, entfernt oder umgeordnet wird.

Wann du es verwenden solltest

Greif zu einem dynamischen Formular, wenn dieselbe Render-Logik viele verschiedene Feldmengen bedienen muss. Wenn du mehrere Formulare pflegst, die sich nur darin unterscheiden, welche Felder sie zeigen, lässt das Ansteuern über Schemata eine Komponente sie alle betreiben, und ein Feld hinzuzufügen wird zu einer Datenänderung statt einer Codeänderung.

Es passt auch zu Formularen, deren Felder anderswo konfiguriert werden, durch ein Admin-Panel, eine Konfigurationsdatei oder ein Content-Modell, und zur Build- oder Renderzeit gelesen werden. Wenn dein Formular eine einzelne feste Menge an Eingaben ist, die sich selten ändert, ist ein schlichtes, fest verdrahtetes Formular einfacher und leichter zu durchdenken. Das dynamische Muster zahlt sich aus, wenn die Feldmenge das ist, was variiert.

Was du aufnehmen solltest

Diese Vorlage kommt mit einer geradlinigen Feldmenge, um das Muster klar zu zeigen. Name ist ein erforderliches Textfeld, E-Mail ist ein erforderliches E-Mail-Feld und Nachricht ist ein optionaler Textbereich, gerendert aus Schema-Definitionen statt als statisches Markup ausgeschrieben. Tausche oder erweitere dieses Array und dieselbe Komponente rendert das Ergebnis; die Einsendung geht weiterhin als eine Payload an Formpaste.

Zwei Dinge zählen mehr als die konkreten Felder. Erstens: Behalte das versteckte Access-Key-Feld in der Payload, damit die Einsendung weiterhin authentifiziert, egal wie sich das Schema ändert. Zweitens: Benenne jeden Schema-Eintrag klar, denn der Feldname, nicht das Label, ist das, was in deinem Posteingang und in deinen Exporten erscheint. Formpaste speichert die Namen, die du sendest, genau so, also halten aussagekräftige Namen wie name, email und message deine Einsendungen lesbar, auch wenn du Labels änderst oder das Schema umordnest.

Tipps für ein schemabasiertes Formular

Behandle Feldnamen als deinen Datenvertrag. Der Name ist das, was in deinem Posteingang und in der CSV landet, also wähle ihn bewusst und halte ihn stabil, auch wenn sich Label oder Reihenfolge ändern. Ein Schema-Eintrag, der von “message” zu “field_4” umbenannt wird, macht aus einer lesbaren Einsendung ein Ratespiel.

Eine Komponente, ein Absenden, jede Form. Egal wie viele Felder das Schema definiert, rendere sie durch die eine Komponente und poste einmal. Widersteh der Versuchung, die Einsendung pro Feld aufzuteilen; ein dynamisches Formular ist weiterhin eine Anfrage an Formpaste, und genau das hält deinen Posteingang aufgeräumt, egal wie das Schema wächst.

Halte das Schema als Quelle der Wahrheit. Wenn ein Feld sich ändern muss, ändere die Daten, nicht das Markup. Diese Disziplin ist der gesamte Vorteil des Musters, und er verschwindet in dem Moment, in dem du anfängst, einzelne Eingaben neben den schemabasierten fest zu verdrahten.