webentwicklung-frage-antwort-db.com.de

Wie erstelle ich ein Formular aus einem JSON-Schema?

Wie erstelle ich ein Formular aus einem JSON-Schema?

Ich schreibe Code in JavaScript und JQuery. Mit diesem Template Teil wie Form erstelle ich dies mit haml und füge dies in js Datei hinzu. Für das Backend verwende ich Python. Ich benutze Django Framework.

Daher habe ich einige Links zum Erstellen von Formularen von JSON Schema erhalten.

Referenzlink: http://neyric.github.io/inputex/examples/json-schema.html

In meinem Formular: Eingabeelemente: Textfelder, Textbereich, Auswahlliste, Senden und Abbrechen-Schaltflächen sind vorhanden.

Ich möchte also fragen, ob das Erstellen eines Formulars mit einem JSON-Schema möglich ist oder nicht. Wenn ja, können Sie einige gute Links bereitstellen?

14
eegloo

jsonform - Formulare aus JSON-Schema erstellen. Einfach vorlagenfähig. Kompatibel mit Twitter Bootstrap aus der Box.

https://github.com/joshfire/jsonform

5

Ich habe nach dem gleichen gesucht, und es stellt sich heraus, dass es einige gute Optionen gibt. Dies sind die besten Bibliotheken, die ich auf GitHub finden konnte:

10
Ognjen

Sie suchen nach Alpaka-Formularen. http://www.alpacajs.org

JSON-Schema gesteuerte Formulare mit jQuery mit Layout-Engines für Bootstrap, jQuery UI/Mobile. Es ist sehr erweiterbar und hübsch gestaltet.

Apache 2.0 lizensiert und tolle Community (ich bin ein Code-Committer).

7

Ich bin gerade auf diese Frage gestoßen und wollte diese neue Option hinzufügen:

JSONForms erweitert den Ansatz des AngularJS-Ansichtsmodells, indem das Erstellen von HTML-Vorlagen zum Erstellen von Formularen durch Nutzung der Funktionen des JSON- und JSON-Schemas entfällt.

GitHub: JSONForms ( Demo )

3
muenchdo

Die Generierung von Formularen aus JSON Schema ist eine gängige Praxis, insbesondere für automatisch generierte Benutzeroberflächen. 

Wenn Sie nur ein Formular erstellen möchten, ist es in Ihrem Fall vielleicht besser, das Formular direkt zu codieren.

Hier ist eine Bibliothek, die ich erstellt habe und die hoffentlich interessant erscheint:

json-forms:

JSON Schema zum HTML-Formulargenerator, der dynamische Subschemas unterstützt (fliegende Auflösung). Erweiterbare und anpassbare Bibliothek mit null Abhängigkeiten. Bootstrap-Add-Ons werden bereitgestellt

Live-Demo unter http://brutusin.org/json-forms

2
idelvall

Schauen Sie sich diese Demo von ngx-schema-form an:

http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json

  • Nimmt eine JSON-Schemadatei
  • Erzeugt das in ein voll funktionsfähiges, bearbeitbares Webseitenformular
  • Speichert Änderungen am JSON-Modell als Javascript-Objekt
  • Ermöglicht das Hinzufügen von benutzerdefiniertem Prüfercode für jeden Abschnitt

Das funktioniert wirklich gut für mich (ich habe es erst vor ein paar Tagen gefunden). Ich verwende es mit dem neuesten Angular, und es funktioniert genauso wie dokumentiert. Die Beispielquelle ist hier:

https://github.com/guillotinaweb/ngx-schema-form/tree/master/src/app/json-schema-example

0
Yavin5

Oder ... Sie könnten einen Blick auf outperform werfen. Es ist eine kleine Javascript-Formulargenerator-Bibliothek, die ich kürzlich geschrieben habe, um meine eigenen Projekte zu unterstützen, weil ich es satt bekam, dass alle von mir betrachteten Formulargeneratoren entweder eine Menge Abhängigkeiten hatten oder deutlich größer waren als meine einzige Web-Seite. Anwendung.

Ich meine, seien wir ehrlich: Wenn mein SPA 20 KB unminified ist, aber mit GZIP ausgestattet ist, dann erwarte ich Bibliotheksroutinen, die etwas einfacher machen, wenn sie ein Formular generieren, das wesentlich kleiner ist. Seine Hauptmerkmale wären:

  • Null Abhängigkeiten.
  • Weniger Füllung (nicht beeinträchtigt, aber gekürzt: <2 KB).
  • Unterstützung für native HTML5-/Browser-Validierung für alle HTML5 + -Eingabetypen.
  • Benutzerdefinierte Validierung nahtlos integriert.
  • Unterstützt alle Web-Frameworks (einschließlich Bootstrap).
  • Beim erneuten Laden einer Seite in allen Browsern werden halb ausgefüllte Formulare automatisch ausgefüllt.
  • JSON set/get für alle Formularwerte.
0
BuGless

Schauen Sie sich dieses Projekt an https://github.com/mirshahreza/json-edit

Ein Jquery-Plugin, das ein Json-Schema in Umwandelt. Es kann in Ihrem Szenario hilfreich sein

0

Eine weitere Option ist " json-schema-js-gui-model ". Es konvertiert das Json-Schema in ein GUI-Modell, das Sie problemlos in jedem Web-Framework verwenden können, um ein benutzerdefiniertes Formular zu erstellen. Für detaillierte Hinweise zum letzten Schritt enthält das angle 2 docs ein Rezept zum Erstellen eines dynamischen Formulars aus einem GUI-Modell.

0
Michael