What You'll Build

A form that can add/delete fields (tasks), add/delete subforms (addresses), and add/delete nested fields (phones) at runtime, using simple variables to keep track of counters and IDs.

What You'll Learn

Adding fields dynamically with a button
Adding and removing subforms
Nested dynamic items and dot-path removals
Using simple variables for counters and lists

⚡

Interactive Learning

Every code snippet below is fully editable! Modify the code and see your changes instantly in the live preview on the right.

Use the play button to run a snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Start with a clean form function. We'll add dynamic behavior step by step.

Step 2: Add Tasks Dynamically

Add an "Add Task" button that appends a new textbox row each time you click it. Each task also gets a per-item remove button.

💡 Tip:

Use a simple counter and an array to track task IDs. No need for separate state APIs.

Step 3: Add Addresses as Subforms

Add an address subform each time you click the button, with its own fields and a remove button.

💡 Tip:

Create a unique subform ID like address_1, then call form.addSubform(addressId). Use form.remove(addressId) to delete.

Step 4: Nested Phones inside Address

Within each address, add a nested phones subform that supports adding/removing phone fields. Use dot paths like address_1.phones.phone_2 to remove specific items.

💡 Tip:

Use a per-address counter and a list kept in variables (for example, a map) to create unique phone_N IDs and remove them reliably.

Try It Yourself

Challenge 1: Add a "Notes" dynamic section similar to tasks.
Challenge 2: Add a "Preferred" checkbox for each phone and a button to remove only preferred phones.
Challenge 3: Add an "Apartment" nested subform under each address, with its own add/remove.

Next Steps

Great work! Continue learning about organizing complex structures:

Continue to Subforms Tutorial