Mobx React Form Api

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

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

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:

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

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
• Source: foxhound87/skills
• License: MIT

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