Array Component

The Array component handles dynamic arrays of form fields, allowing users to add, remove, and manage items in the array and also support nested arrays. It uses Material-UI's Accordion component for better organization and user experience.

Schema

warning

Warning: Avoid using . (dot) in the name property as it can cause issues with nested field paths in the form state.

examples of naming convension accepted:

• obj_item
• objItem1
• anyname

[
    {
        "name": "items",
        "meta": {
            "displayType": "array",
            "displayName": "Items",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "readOnly": true,
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "itemName",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Item Name",
                        "validation": {
                            "required": true
                        }
                    }
                },
                {
                    "name": "itemQuantity",
                    "meta": {
                        "displayType": "number",
                        "displayName": "Item Quantity",
                        "validation": {
                            "required": true,
                            "min": 1
                        }
                    }
                }
            ]
        }
    }
]

Example

Items

1

Item Name



Item Quantity

​

---

---

Form Data:

{}

props

meta object

The meta object contains properties that define the display characteristics and behavior of the ArrayField section.

Name	Description	Type
displayName	The name to display as the section header	string
htmlProps	Properties for HTML behavior, like allowDynamic and allowAdd	object
children	Array of child fields contained within the ArrayField	array
max	Maximum number of items allowed in the array	number
displayType	Type of the field display, which is "array" in this case	string
allowAdd	Defines whether new items can be added to the array.	boolean
allowDynamic	Enable Static or dynamic input for array input	boolean
readOnly	A readonly field is not editable and value cannot be changed	boolean

Example JSON

ArrayField with validation

[
    {
        "name": "items",
        "meta": {
            "displayType": "array",
            "displayName": "Items",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "itemName",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Item Name",
                        "validation": {
                            "required": true,
                            "requiredDetail": { "errorMsg": "Item Name is required" }
                        }
                    }
                },
                {
                    "name": "itemQuantity",
                    "meta": {
                        "displayType": "number",
                        "displayName": "Item Quantity",
                        "validation": {
                            "required": true,
                            "min": 1,
                            "requiredDetail": { "errorMsg": "Item Quantity is required" },
                            "minDetail": { "errorMsg": "Item Quantity must be at least 1" }
                        }
                    }
                }
            ]
        }
    }
]

ArrayField with disabled field

[
    {
        "name": "items",
        "meta": {
            "displayType": "array",
            "displayName": "Items",
            "htmlProps": {
                "allowDynamic": true,
                "allowAdd": true
            },
            "validation": {
                "max": 5
            },
            "children": [
                {
                    "name": "itemName",
                    "meta": {
                        "displayType": "text",
                        "displayName": "Item Name",
                        "isDisabled": true
                    }
                },
                {
                    "name": "itemQuantity",
                    "meta": {
                        "displayType": "number",
                        "displayName": "Item Quantity",
                        "isDisabled": true
                    }
                }
            ]
        }
    }
]