Nested data
Submit arrays of fields (items[name][], items[qty][])
Form Repeat
Learn how Form Repeat structures nested form rows in Wappler so users can add, remove, reorder, and submit repeated data as one coherent request.
Form Repeat
This tour explains both the UI problem and the data model behind Form Repeat. You will look at how repeated rows are defined, which controls manage those rows, and how Wappler turns the repeated inputs into structured data the server can process.
What it solves
By the end, you should recognize when Form Repeat is the right tool: whenever users need to manage a variable number of related entries in one form and you want Wappler to keep the repeated fields, controls, and submitted payload aligned.
UI controls
Add/remove/duplicate/move rows visually
Constraints
Min/max items + optional sorting
Configure items + min/max
Add controls with actions
Submit nested fields in one request
Where you configure it
This tour selects the Form Repeat component in App Structure and then inspects its Items/min/max/sortable properties in Properties.
Core properties
Configure what repeats and how it behaves.
Form Repeat component
This component repeats a block of form fields for each item. This step matters because Form Repeat component is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Items (what repeats) and see how it fits into this area.
Items (what repeats)
Items is bound to an array source. Each row gets its own scope (name/qty in this example). This step matters because Items (what repeats) is part of Selection Panels Properties Formrepeatitems, and understanding that context makes the next action easier to repeat in your own project.
Min items
Min prevents removing rows below a required count. Use canAdd/canRemove to keep buttons in sync.
tip: Bind disabled to lineItems.canAdd / lineItems.canRemove so controls stay in sync with min/max.
min keeps at least N rows
Bind disabled to canRemove when at min
Prefer clear UX for required rows
Max items
Max prevents adding too many rows. Pair it with canAdd so the Add button disables at the limit.
max prevents too many rows
Bind disabled to canAdd when at max
Keep constraints visible to users
Sortable + handle
Enable sortable for drag reordering, and set a handle selector so only a handle can drag.
important: Use a handle (like .handle) so inputs remain easy to edit without accidental drags.
sortable enables drag reorder
handle selects the drag grip element
animation controls drag animation duration
Handle selector
Handle is the CSS selector that defines the drag grip (so editing inputs doesn’t start dragging).
tip: In this page, the drag button uses the class .handle, so Handle is set to .handle.
Animation (ms)
Animation controls how long the drag reorder animation runs (in milliseconds).
Keep it short (e.g. 150–250ms)
Use 0 to disable animation
Don’t over-animate data entry UIs
Actions and events
Form Repeat includes actions for adding, removing, moving, duplicating, and resetting rows.
Common actions
Attach these actions to button click events via the Actions Picker.
repeat.add()
repeat.remove($index)
repeat.duplicate($index)
repeat.moveBefore($index) / moveAfter($index)
repeat.reset()
Common events
Listen to lifecycle events like added/removed/moved when you need to trigger follow-up logic.
dmx-on:added
dmx-on:removed
dmx-on:moved (oldIndex/newIndex)
dmx-on:duplicated
dmx-on:updated
Preview mode: try the repeat controls
Switch to Preview mode and use the controls to add/duplicate/remove rows. This shows how repeat actions drive the UI.
Preview mode
Switch the page to Preview mode so you can interact with it like a real app.
Wait for Preview mode
Wait for the page to finish switching modes.
Add item button
We’ll click Add item to append a new row (until max).
Duplicate a row
Duplicate copies the row values into a new item.
Remove a row
Remove deletes a row. When you hit min, the button disables via lineItems.canRemove.
Try editing row fields
Edit the Name/Qty inputs, then duplicate a row to see the values carry over.
Reset back to initial items
Reset restores the original array so you can try again.
Return to Edit mode
Switch back to Edit mode to continue inspecting components.
Wrap-up
Next, connect the repeated fields to a Server Connect form for nested inserts/updates.
Next steps
Pick a related tour to continue.