Package Exports

mithril-ui-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mithril-ui-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 certain elements.

TODO

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.
Create a handlebars-like component: put in a template and an object, and render HTML
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.

Remarks about the LLF

Start with the event description
End with editors and sources

Process

Start with a TypeScript interface of the desired object.

interface IEditor { name: string; role: string; organisation: string; email: string; }
interface ISource { title: string; url: string; }

interface ILessonLearned {
  id: string;
  event: string;
  description: string;
  created: Date;
  edited: Date;
  editors: IEditor[];
  sources: ISource[];
  eventDescription: {
    riskCategory: {};
    ...
  }
}

Based on the interface, create a Form:

interface IFormComponent<T> {}

interface IMultiFormComponent<T> {
  [key: keyof T]: IFormComponent<T> | IFormComponent<T>[] | IMultiFormComponent<T>;
}

const editor = {
  name:  { type: 'text', maxLength: 80, required: true, className: 'col.s6' },
  role:  { type: 'text', maxLength: 20 },
} as IFormComponent<ILessonLearned>;

const source = {
  title:  { type: 'text', maxLength: 80, required: true, icon: 'title' },
  url:  { type: 'url', maxLength: 80, required: true },
} as IFormComponent<ILessonLearned>;

const info = {
  id: { type: 'text', maxLength: 80, required: true },
  event:  { type: 'text', maxLength: 80, required: true },
  description:  { type: 'textarea', maxLength: 500, required: true },
  created: { type: 'date', required: true },
  edited: { type: 'date', required: true },
  editors: { type: 'kanban', model: editor },
} as IMultiFormComponent<ILessonLearned>;

const ll = {
  info,
  sources: [source],
  eventDescription: {}
} as IMultiFormComponent<ILessonLearned>;