Mithril-UI-Form

Create dynamic forms based on JSON as input.

A JSON file using a simple syntax is converted to a materialized-css form. The entered data is returned as an object.

The form supports markdown input, repeating elements a (dynamic) number of times, and conditionally displaying or disabling certain fields. If readonly is true, the form becomes a static display.

If the form is an object, you can also include a field transform (to and from) function.

Placeholders

If your form generates an object, e.g.

const obj = {
  checked: true,
  date: 1572416907856
}

And you use a very simple form:

const form = [
  { "id": "date", "type": "date", "label": "Select a date" },
  { "id": "checked", "disabled": "!date", "type": "checkbox", "label": "Check me" },
  { "type": "md",  "show":"checked", "value": "The current time is {{date:time}} and checked is {{checked:yes:no}}" }
]

m(LayoutForm, {
  form,
  obj,
}),

It would render The current time is 7:28:27 AM and checked is yes.

TODO

• When repeat = true, min: 2, max: 5 should limit the number of repeats to 5 and require a minimum of 2.
• Add pre-sets, overriding existing values.
• Add support for getting the value of an option based on id. E.g. extract all options to a new object (key is the id of the field, value is the list of options), so we can resolve their values easily later.
• Use this tool to create your own form schemas. E.g. a two-column layout, where you define your schema in the left column, and see the results in the right column.