¶ Definition
A Custom Dynamic Repeater is a form component that dynamically generates a list of repeated sub-fields based on a provided data source. Each item in the list can have its own structured fields, such as inputs, file uploads, or hidden metadata, and can be populated programmatically from APIs or other form fields.
¶ Description
This component is used to handle dynamic collections of items in a form where the number of elements is not fixed. It supports:
- Automatic population of items from another field or API.
- Customizable labels and identifiers for each repeated item.
- Nested fields for each item (e.g., file upload, hidden flags, or input fields).
- Configurable empty state messaging and optional debug logging.
-
Complete JSON Object
{ "key": "dynamicItemsgDRrC", "id": "formly_72_customdynamicrepeater_dynamicItemsgDRrC_2", "type": "customdynamicrepeater", "props": { "items": [], "label": "Dynamic Items", "disabled": false, "placeholder": "", "dynamicRepeaterConfig": { "itemIdField": "id", "itemLabelField": "label", "emptyStateMessage": "No items available. Items will be populated automatically from the data source.", "enableDebugLogging": false } }, "defaultValue": null, "expressions": { "props.items": "field?.parent?.fieldGroup?.find(f => f.key === 'FetchedattachmentsPBTfQ')?.props?.options?.map(opt => ({ id: opt.value, label: opt.label })) || []" }, "validation": { "messages": {} }, "validators": null, "asyncValidators": null, "fieldArray": { "fieldGroup": [ { "key": "itemId", "type": "input", "props": { "hideField": true }, "defaultValue": null }, { "key": "_isApiPopulated", "type": "input", "props": { "hideField": true }, "defaultValue": false }, { "key": "fileUpload", "type": "customfileupload", "props": { "hint": "Upload: {{label}}", "label": "{{itemLabel}}", "disabled": false, "required": false, "placeholder": "Select file to upload", "allowedFormats": [], "maximumUploadSize": 400, "minimumUploadSize": 1 }, "validation": { "messages": { "maximumUploadSize": "Maximum upload size exceeded", "minimumUploadSize": "Minimum upload size not met" } } } ] } }## UI Configuration¶ In Widget tab
¶ Settings
¶ Display Rule
-
Allowed Custom Properties
Property Type Default Description itemsArray [] Data to be iterated by the repeater itemIdFieldstring - The unique identifier for the elements itemLabelFieldstring - The label field of an element emptyStateMessagestring 'No items available. Items will be populated automatically from the data source.' The empty state message enableDebugLoggingboolean false Whether to display debug logs (the data the component is receiving, …) -
Allowed Validations
validator-(n)
- Missing to be configured via UI
- How to configure the source of items
- Conditional validations
- Default value
- Display rule: Compare against Form State Value
- Of which field?
- Is the user supposed to interact with this components?