# Mobx React Form Nested

> Nested and array fields for mobx-react-form — dot notation, array notation, dynamic add/remove, ArrayMap, field traversal.

- **Type:** Skill
- **Install:** `agentstack add skill-foxhound87-skills-mobx-react-form-nested`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [foxhound87](https://agentstack.voostack.com/s/foxhound87)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [foxhound87](https://github.com/foxhound87)
- **Source:** https://github.com/foxhound87/skills/tree/main/mobx-react-form-nested

## Install

```sh
agentstack add skill-foxhound87-skills-mobx-react-form-nested
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

```javascript
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:**

```javascript
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)

```javascript
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)

```javascript
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:

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

## Accessing Fields at Runtime

```javascript
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

```javascript
// 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

```javascript
// 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

```javascript
// 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

```javascript
// 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 |

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

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

## Checking Field State

```javascript
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

```javascript
// 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](https://github.com/foxhound87)
- **Source:** [foxhound87/skills](https://github.com/foxhound87/skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-foxhound87-skills-mobx-react-form-nested
- Seller: https://agentstack.voostack.com/s/foxhound87
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.