Mobx React Form Nested

Skill: mobx-react-form-nested

Mission

Guide the user through defining and managing nested fields, array fields, and dynamic field collections in mobx-react-form.

Use this skill when the user needs to:

• Define nested object fields (e.g. address.street, club.name)
• Define array fields (e.g. members[], hobbies[])
• Dynamically add and remove fields
• Traverse nested fields with $(), each(), map(), reduce()
• Understand ArrayMap internals

Nested Notation Reference

| Syntax | Meaning | Example Path | |--------|---------|-------------| | parent.child | Nested object | address.street | | arr[] | Array of items | members[].name | | arr[].nested[] | Nested arrays | members[].hobbies[] | | arr[N] | Specific index | members[0].name |

Nested: Unified Mode

Use the fields property inside a field definition:

const fields = [{
  name: 'address',
  label: 'Address',
  fields: [{
    name: 'street',
    label: 'Street',
    value: 'Broadway',
    default: '5th Avenue',
  }, {
    name: 'city',
    label: 'City',
    value: 'New York',
  }],
}];

new Form({ fields });

> The name property is required in array syntax.

Arrays of nested fields:

const fields = [{
  name: 'members',
  label: 'Team Members',
  fields: [{
    name: 'firstname',
    label: 'First Name',
  }, {
    name: 'lastname',
    label: 'Last Name',
  }],
}];

new Form({ fields });

// Add a new member dynamically:
form.$('members').add({ value: { firstname: 'John', lastname: 'Doe' } });

Nested: Separated Mode

Object nesting (dot notation)

const fields = [
  'club.name',
  'club.city',
];

const values = {
  club: { name: 'Jazz Club', city: 'New York' },
};

const labels = {
  'club': 'Club',
  'club.name': 'Club Name',
  'club.city': 'Club City',
};

const rules = {
  'club.name': 'required|min:3',
  'club.city': 'required|min:3',
};

Array nesting (bracket notation)

const fields = [
  'members',
  'members[].firstname',
  'members[].lastname',
  'members[].hobbies',
  'members[].hobbies[]',
];

const values = {
  members: [{
    firstname: 'Clint',
    lastname: 'Eastwood',
    hobbies: ['Soccer', 'Baseball'],
  }, {
    firstname: 'Charlie',
    lastname: 'Chaplin',
    hobbies: ['Golf', 'Basket'],
  }],
};

const labels = {
  'members[].firstname': 'Member First Name',
  'members[].lastname': 'Member Last Name',
};

const rules = {
  'members[].firstname': 'required|min:3',
  'members[].lastname': 'required|min:3',
};

> Dot notation keys reference field paths. Array notation members[] applies to every element in the array.

Alternative syntax — property values as nested objects:

const labels = {
  club: {
    name: 'Club Name',
    city: 'Club City',
  },
  members: [{
    firstname: 'First Name',
    lastname: 'Last Name',
  }],
};

Accessing Fields at Runtime

form.$('club');                // nested group
form.$('club.name');           // nested field
form.$('members');             // array field (ArrayMap)
form.$('members[0]');          // first member
form.$('members[0].firstname'); // field inside array element
form.$('members').$(0).$('firstname'); // chained selector

Dynamic Field Operations

Adding fields

// Add a new member (creates from struct defaults)
form.$('members').add();

// Add with values
form.$('members').add({ value: { firstname: 'John' } });

// Add via event handler
Add Member

// Add with value via event
 form.$('members').onAdd(e, { firstname: 'John' })}>Add

Deleting fields

// Delete by field
form.$('members').$(0).onDel();

// Delete by path
form.del('members[0]');

// Soft delete (keeps field, marks as deleted)
// Enable option: { options: { softDelete: true } }

Updating fields

// Update specific field value
form.$('club.name').set('New Club Name');

// Update nested values recursively
form.set('club', { name: 'New Name', city: 'New City' });

// Update with auto-create
form.update({
  club: { name: 'New Club', city: 'Chicago' },
  members: [{ firstname: 'Jane' }],
});

Iterating Nested Fields

// each() — iterate recursively
form.each((field, index, depth) => {
  console.log(field.path, field.value, depth);
});

// map() — map fields
const names = form.$('members').map(f => f.$('firstname').value);

// reduce() — reduce fields
const totalAge = form.$('members').reduce((acc, f) => acc + Number(f.$('age').value || 0), 0);

ArrayMap

Array fields are backed by ArrayMap — an ordered key-value collection that maintains insertion order via an observable array.

Key methods:

| Method | Description | |--------|-------------| | size | Number of entries | | get(key) | Get by key | | set(key, value) | Set entry | | has(key) | Check existence | | delete(key) | Remove entry | | clear() | Remove all | | keys() | Iterator over keys | | values() | Iterator over values | | entries() | Iterator over [key, value] | | forEach(cb) | Iterate entries | | move(from, to) | Reorder entries | | toArray() | Get underlying observable array |

form.$('members').forEach((field, key) => {
  console.log(key, field.$('firstname').value);
});

// Get number of array items
const count = form.$('members').size;

Checking Field State

form.$('club').hasNestedFields;      // true (has child fields)
form.$('club.name').hasNestedFields; // false (leaf field)

form.$('members').hasIncrementalKeys; // true (integer keys)

// Check computed properties on all nested
form.$('club').check('isValid', true); // deep check all children
form.$('club').check('isDirty', true); // deep check all children

Container / Parent Access

// Get parent container
form.$('members[0].firstname').container(); // returns members[0] field

// Get form from field
form.$('email').state.form; // returns the Form instance

Key Takeaways

1. Dot notation for nested objects: parent.child.grandchild
2. Bracket notation for arrays: arr[], arr[].field, arr[].nested[]
3. Dynamic arrays: Use add() / del() or onAdd / onDel event handlers
4. ArrayMap preserves insertion order and supports move() for reordering
5. Traversal: each() for deep iteration, map()/reduce() for collections
6. Chained selectors: form.$('members').$(0).$('firstname')

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-flat](../mobx-react-form-flat/SKILL.md) — Flat field definitions
• [mobx-react-form-validation](../mobx-react-form-validation/SKILL.md) — Validation rules for nested fields
• [mobx-react-form-sortable](../mobx-react-form-sortable/SKILL.md) — Reordering array fields

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: foxhound87
• Source: foxhound87/skills
• License: MIT

Install and usage instructions live in the source repository linked above.