# Mobx React Form Api

> Core API for mobx-react-form — installation, Form/Field constructor, properties, methods, helpers, and event handlers. Prerequisite for all other mobx-react-form skills.

- **Type:** Skill
- **Install:** `agentstack add skill-foxhound87-skills-mobx-react-form-api`
- **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-api

## Install

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

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-api

## Mission

Guide the user through installing, initializing, and using the core API of **mobx-react-form** — a reactive MobX form state management library.

Use this skill whenever the user needs to:
- Install and set up mobx-react-form
- Create a Form instance (constructor, extending class)
- Understand Form properties, methods, and helpers
- Understand Field properties, methods, and helpers
- Access fields with `$()` / `select()`
- Use values/errors/labels helpers

## Installation

```bash
npm install --save mobx-react-form
```

Peer dependencies: `mobx` (v6+).

## Architecture

```
Form (extends Base)
├── fields: ArrayMap
│   └── Field (extends Base)
│       ├── properties (value, label, error, etc.)
│       ├── methods (bind, validate, set, etc.)
│       └── event handlers (onChange, onFocus, etc.)
├── state: State
│   ├── options: Options
│   └── bindings: Bindings
└── validator: Validator
    └── drivers (DVR, VJF, SVK, YUP, JOI, ZOD)
```

## Form Constructor

```javascript
import { Form } from 'mobx-react-form';

// First argument: fields definitions
// Second argument: plugins, options, bindings, hooks, handlers, extra
const form = new Form(
  { fields, values, labels, rules, hooks, ... },
  { plugins, options, bindings, extra }
);
```

Or by extending the class:

```javascript
class MyForm extends Form {
  setup() {
    return { fields: [...] };
  }
  plugins() {
    return { dvr: dvr({ package: validatorjs }) };
  }
  hooks() {
    return { onSuccess(form) { ... }, onError(form) { ... } };
  }
}
const form = new MyForm();
```

## Form Properties (Computed, MobX-reactive)

| Property | Type | Description |
|----------|------|-------------|
| `size` | int | Number of contained fields |
| `submitting` | boolean | Form is submitting |
| `submitted` | int | Times form has been submitted |
| `validating` | boolean | Form is validating |
| `validated` | int | Times form has been validated |
| `isValid` | boolean | All fields valid |
| `isDirty` | boolean | Form has changes |
| `isPristine` | boolean | Form unchanged |
| `isDefault` | boolean | Form at default values |
| `isEmpty` | boolean | Form is empty |
| `disabled` | boolean | Form is disabled |
| `focused` | boolean | Any field focused |
| `touched` | boolean | Any field touched |
| `changed` | int | Times value changed |
| `hasError` | boolean | Form has errors |
| `error` | string | Generic error message |
| `flatMapValues` | object | Path → validated value map |
| `hasNestedFields` | boolean | Has nested fields |
| `hasIncrementalKeys` | boolean | Nested fields have integer keys |

## Form Methods & Shared Methods (Form + Field)

| Method | Input | Output | Description |
|--------|-------|--------|-------------|
| `clear()` | - | void | Clear to empty values |
| `reset()` | - | void | Reset to default values |
| `invalidate(msg)` | string | void | Mark as invalid |
| `resetValidation(bool)` | boolean | void | Reset validation status |
| `showErrors(bool)` | boolean | void | Show/hide error messages |
| `select(path)` / `$(path)` | string | Field | Field selector (chained) |
| `update(obj)` | object | void | Update field values, auto-creates fields |
| `submit(hooks, opts)` | object | Promise | Validate + trigger onSuccess/onError |
| `validate(opt)` | object | Promise | Validate form/field |
| `check(computed, deep)` | string, bool | boolean | Check computed property |
| `get(prop)` | string | object | Get field props recursively |
| `set(prop, val)` | string, any | void | Set field property |
| `has(key)` | string | boolean | Check if field exists |
| `map(callback)` | function | array | Map nested fields |
| `reduce(callback, acc)` | function, any | any | Reduce nested fields |
| `each(callback)` | function | void | Iterate fields recursively |
| `add(obj)` | any | any | Add a field or nested field |
| `del(key)` | string | void | Delete a field |
| `move(from, to)` | number, number | void | Move array field item |
| `observe(obj)` | object | function | MobX observer, returns disposer |
| `intercept(obj)` | object | function | MobX interceptor, returns disposer |
| `dispose()` | - | void | Remove all observers/interceptors |

## Form Helpers

| Method | Output | Description |
|--------|--------|-------------|
| `values()` | object | Get all field values |
| `errors()` | object | Get all field errors |
| `labels()` | object | Get all field labels |
| `placeholders()` | object | Get all field placeholders |
| `defaults()` | object | Get all field default values |
| `initials()` | object | Get all field initial values |
| `types()` | object | Get all field types |

## Field Properties

**Editable Props:**
`type`, `value`, `initial`, `default`, `label`, `placeholder`, `related`, `options`, `rules`, `validators`, `validatedWith`, `extra`, `bindings`, `hooks`, `handlers`, `deleted`, `disabled`, `autoFocus`, `inputMode`, `converter`, `converters`, `computed`, `nullable`, `autoComplete`, `ref`, `observers`, `interceptors`

**Computed Props:**
`key`, `name`, `path`, `size`, `submitting`, `submitted`, `validating`, `validated`, `focused`, `touched`, `changed`, `blurred`, `isValid`, `isDirty`, `isPristine`, `isDefault`, `isEmpty`, `hasError`, `error`, `files`, `checked`, `validatedValue`, `actionRunning`, `hasNestedFields`, `hasIncrementalKeys`

## Field Methods

| Method | Input | Output | Description |
|--------|-------|--------|-------------|
| `bind(props)` | object | object | Get bindings props to spread on input |
| `container()` | - | object | Get parent field container |
| `clear()` | - | void | Clear to empty |
| `reset()` | - | void | Reset to default |
| `focus()` | - | void | Programmatic focus |
| `blur()` | - | void | Programmatic blur |
| `trim()` | - | void | Trim string value |
| `invalidate(msg)` | string | void | Mark as invalid |
| `resetValidation()` | - | void | Reset validation |
| `sync(e)` | event | void | Sync value (no hooks) |

## Field Event Handlers

| Handler | Effect |
|---------|--------|
| `onChange(e)` / `onSync(e)` | Update value + triggers onChange hook |
| `onToggle(e)` | Update value + triggers onToggle hook |
| `onFocus(e)` | Track focused state |
| `onBlur(e)` | Track touched state |
| `onDrop(e)` | Handle file drops |
| `onKeyDown(e)` | Handle key down |
| `onKeyUp(e)` | Handle key up |
| `onSubmit(e)` | Sub-form submission |
| `onClear(e)` | Clear to empty |
| `onReset(e)` | Reset to default |
| `onAdd(e, val)` | Add a field |
| `onDel(e, path)` | Delete a field |

## Basic Usage Example

```javascript
import { Form } from 'mobx-react-form';
import dvr from 'mobx-react-form/lib/validators/DVR';
import validatorjs from 'validatorjs';

const form = new Form({
  fields: {
    email: { label: 'Email', value: 'test@test.com', rules: 'required|email' },
    password: { label: 'Password', type: 'password', rules: 'required|min:6' },
  },
}, {
  plugins: { dvr: dvr({ package: validatorjs }) },
  hooks: {
    onSuccess(form) { console.log('Valid!', form.values()); },
    onError(form) { console.log('Errors!', form.errors()); },
  },
});

// In React:
// 
// {form.$('email').error}
// Submit
```

## Key Concepts

1. **Everything is reactive**: Form and Field properties are MobX observables — components wrapped in `observer()` re-render automatically.
2. **Two definition modes**: Unified (props per field) or Separated (props split across objects).
3. **Field selector**: `form.$('path')` or `form.select('path')` — supports chaining and dot notation for nested fields.
4. **Validation hooks**: `onSuccess(form)` and `onError(form)` are called after submit/validate.
5. **Dispose on unmount**: Always call `form.dispose()` in React `useEffect` cleanup to remove MobX observers.

## Related Skills

- [mobx-react-form-flat](../mobx-react-form-flat/SKILL.md) — Flat field definitions
- [mobx-react-form-nested](../mobx-react-form-nested/SKILL.md) — Nested and array fields
- [mobx-react-form-validation](../mobx-react-form-validation/SKILL.md) — Validation plugins
- [mobx-react-form-bindings](../mobx-react-form-bindings/SKILL.md) — Custom bindings

## 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-api
- 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%.