Comment on page
Array (list of objects)

Overview
In order to use an array of objects field, add children and type: InputType.Array to your FieldConfig.
It is only used for objects, if you want other arrays like text please use InputType.MultiText
children: { fields: FieldConfig[] },
type: InputType.Array,
Interface
interface FieldConfig {
  key: string;
  type: InputType.Array;
  children: { fields: FieldConfig[] };
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
key: A unique identifier for the field.
type: The type of input to use for the field, as specified by the InputType enumeration.
​children: A nested set of fields.
label: (optional) The label to display for the field.
isDisabled: (optional) A boolean value indicating whether the field should be disabled.
isRequired: (optional) A boolean value indicating whether the field is required.
defaultValue: (optional) The default value for the field.
An array of a nested set of fields for use with InputType.Array fields. This allows you to add, edit and delete multiple objects in an array.
Properties
​children: The nested children configuration, view docs​
Example
Here is an example of how the children property can be used in a FieldConfig object:
const passengersFormConfig: FormConfig = {
  fields: [
    {
      key: "passengers",
      label: "Passengers",
      type: "array",
      children: {
        fields: [
          {
            key: "email",
            label: "Email",
            type: "text",
            isRequired: true,
          },
          {
            key: "first_name",
            label: "First Name",
            type: "text",
            isRequired: true,
          },
          {
            key: "last_name",
            label: "Last Name",
            type: "text",
            isRequired: true,
          },
        ],
      },
    },
  ],
};
In this example, the passengersFormConfig object represents a group of fields that are used to add, edit and delete multiple passengers to the form.
Example Output
{
  "passengers": [
    {
      "email": "[email protected]",
      "first_name": "John",
      "last_name": "Doe"
    },
    {
      "email": "[email protected]",
      "first_name": "May",
      "last_name": "Smith"
    }
  ]
}
Object
Custom
Last modified 10mo ago