@humany/widget-forms

This package contains utilities for creating, reading and validating forms in Humany widgets.

FormBuilder

Provides a convenient way to create and modify Form objects.

createComponent(info: ComponentInfo, createChildren?: ComponentFactory);

Creates a new component based on the provided ComponentInfo object and appends it to the current Form.

ComponentInfo

Describes a component in a form.

name: string

The name of the component.

type: string

The underlying type of the component. Can be "string", "number", "boolean" or "object".

component: string

The UI component used to render the component.

title: string (optional)

The display name of the component.

evaluate: boolean

Indicates whether changes to the component value should be evaluated. Default: false

value: string | number | boolean

The initial value of the component.

ComponentFactory = (builder: FormBuilder) => void

A factory method for creating nested components.

Creating simple components

The following example shows construction of a form with two components, one for country and one for city.

const form = builder
  .createComponent({
    component: 'Text',
    type: 'string',
    name: 'country',
    value: 'SE',
  })
  .createComponent({
    component: 'Text',
    type: 'string',
    name: 'city',
    value: 'Stockholm',
  })
  .get();

Creating nested components

The following example shows construction of a form with nested components. The first component is a fieldset holding two child components; first and and last name.

const form = builder
  .createComponent(
    {
      component: 'Fieldset',
      type: 'object',
      name: 'name',
    },
    (builder) => {
      builder
        .createComponent({
          component: 'Text',
          type: 'string',
          name: 'first-name',
          value: 'John',
        })
        .createComponent({
          component: 'Text',
          type: 'string',
          name: 'last-name',
          value: 'Doe',
        });
    },
  )
  .get();