Flexibile Form (fform) ist ein Formularersteller mit minimaler Code-Redundanz, der Ă€uĂerst flexibel und erweiterbar ist. Verwendeter Technologie-Stack: React (v16), Redux (optional), JSONSchema , TypeScript . Die Hauptidee ist die maximal mögliche Wiederverwendung von Schaltkreisen, Komponenten und Funktionen.
Eigenschaften
- 98 kb minimiert, 28 kb komprimiert
- Schnellstart- Formular-Designer
- Kombinieren und Wiederverwenden von Formularen oder Teilen davon bei Verwendung der Eigenschaften
oneOf , allOf , $ref - Validierung sync / async / JSON / submit
- Native Redux-UnterstĂŒtzung, es ist jedoch möglich, jeden anderen Speicher (einschlieĂlich internen) zu verwenden.
- Volle UnterstĂŒtzung fĂŒr Arrays (HinzufĂŒgen / Entfernen / Verschieben)
- Eingebauter Viewer
- VollstÀndig anpassbare und anpassbare Formularelemente
- SSR-UnterstĂŒtzung
- Keine AbhÀngigkeiten (Als extern reagieren)
Da es gemÀà der JSONSchema-Spezifikation nur durch Daten im JSON-Format definiert wird, wird das Formular in fform durch zwei Objekte definiert:
- JSONSchema-Schema (Entwurf v4, mit zusÀtzlichen Eigenschaften), das nur JSON-Daten enthÀlt und Formularfelder sowie die Position von Objekten wie SchaltflÀchen, Links, Registerkarten usw. beschreibt.
- Ein Elementobjekt, das React (v16) -Komponenten, -Funktionen, hÀufig verwendete Teile von Komponenten und im Prinzip jeden anderen js- oder JSON-Code enthÀlt, auf den von einem beliebigen Teil des Elementobjekts oder von erweiterten Feldern des JSONSchema-Objekts verwiesen werden kann. Elemente sind im Wesentlichen ein Repository von Codebausteinen, aus denen das gesamte Formular zusammengesetzt wird, und der Grad der ElementaritÀt dieser Zypressen wird vom Entwickler bestimmt.
FlexibilitÀt, Erweiterbarkeit und Neuanwendung von vorgefertigten Schaltungen, Komponenten und Funktionen werden wie folgt implementiert:
- Erweitern von Schemas mithilfe der Eigenschaften $ ref und allOf, wie in der JSONSchema-Spezifikation beschrieben . Link zu einem Beispiel .
- Erweitern des Elements-Objekts nach einem Àhnlichen Prinzip, jedoch mit einer anderen Syntax (um visuell zu unterscheiden, wo sich das Schema erweitert und wo sich Elemente erweitern). Dokumentation Link zu einem Beispiel .
- Daten- und Ereignishandler verwenden Pipes von js-Funktionen Ă€hnlich wie Linux. Die Ausgabe einer Funktion wird der Eingabe der nĂ€chsten Funktion zugefĂŒhrt, wodurch Sie (mit der korrekten Aufteilung der Verantwortlichkeiten der Funktionen) vorhandene Funktionen wiederverwenden und nur dann neue hinzufĂŒgen können, wenn noch nicht implementierte Funktionen erforderlich sind. Dokumentation Link zu einem Beispiel .
Referenzen