Mobx React Form Composer

Skill: mobx-react-form-composer

Mission

Guide the user through using the Forms Composer utility in mobx-react-form to manage and orchestrate multiple independent Form instances.

Use this skill when the user needs to:

• Manage multiple independent forms together
• Validate/submit/clear/reset all forms at once
• Check validity across all forms
• Aggregate values and errors from multiple forms
• Build pages composed of separate form sections

Concept

The composer() helper groups multiple Form instances into a single orchestrated object. It provides batch operations: validate all, submit all, clear all, reset all, and check aggregated state.

Import

import { composer } from 'mobx-react-form/lib/composer';

Basic Usage

const forms = composer({
  registration: new RegistrationForm(),
  profile: new ProfileForm(),
});

// Check if all forms are valid
forms.valid(); // true/false

// Validate all at once
forms.validate({ showErrors: true })
  .then(({ valid, errors, values }) => {
    console.log('All valid?', valid);
    console.log('Errors:', errors);
    console.log('Values:', values);
  });

// Submit all at once
forms.submit({ validate: true })
  .then(({ valid, errors, values }) => {
    if (valid) {
      // send aggregated data
    }
  });

// Clear all
forms.clear({ deep: true, execHook: false });

// Reset all
forms.reset({ deep: true, execHook: false });

Composer API

| Method | Input | Output | Description | |--------|-------|--------|-------------| | instances() | - | object | Get raw object with all Form instances | | select(key) | string | Form | Select a form by key | | check(prop) | string | object | Check a computed prop on each form | | get(prop) | string | object | Get a prop from each form | | valid() | - | boolean | All forms valid | | error() | - | boolean | Any form has errors | | clear(opts) | object | void | Clear all forms | | reset(opts) | object | void | Reset all forms | | validate(opts) | object | Promise | Validate all forms | | submit(opts) | object | Promise | Submit all forms |

Promise resolve shape

Both validate() and submit() resolve with:

{
  composer: composer(forms), // new composer instance after operation
  valid: boolean,            // all forms valid
  error: boolean,            // any form has errors
  errors: object,            // { formKey: { fieldPath: error } }
  values: object,            // { formKey: { fieldPath: value } }
}

Real-World: Nested Composition

Two independent Form instances orchestrated by a parent component:

import { observer } from 'mobx-react';
import { composer } from 'mobx-react-form/lib/composer';

const forms = composer({
  contact: contactForm,
  address: addressForm,
});

const NestedComposition = observer(() => {
  const handleValidateAll = async () => {
    const result = await forms.validate({ showErrors: true });
    setResult(result);
  };

  const handleSubmitAll = async () => {
    const result = await forms.submit({
      validate: true,
      execOnSubmitHook: false,
      execValidationHooks: true,
    });
    setResult(result);
  };

  return (
    
      
        Contact
        
        
        Submit Contact
      

      
        Address
        
        
        Submit Address
      

      Validate All
      Submit All
    
  );
});

Options

clear/ reset options

forms.clear({
  deep: true,      // deep clear nested fields
  execHook: false,  // execute onClear hooks
});

forms.reset({
  deep: true,
  execHook: false,
});

validate options

forms.validate({
  showErrors: true, // show validation errors
});

submit options

forms.submit({
  validate: true,              // validate before submit
  execOnSubmitHook: false,      // execute onSubmit hooks
  execValidationHooks: false,   // execute onSuccess/onError
});

Individual Form Access

// Select a specific form
const contactForm = forms.select('contact');
contactForm.submit();
contactForm.clear();
contactForm.$('email').validate();

// Use check/get on individual properties
const validity = forms.check('isValid');
// { contact: true, address: false }

const values = forms.get('value');
// { contact: { fullName: '...' }, address: { street: '...' } }

When to Use Composer vs Cross Validation

| Approach | Use Case | |----------|----------| | Cross Validation (one form, nested groups) | Same submit endpoint, homogeneous validation | | Composer (independent forms) | Different APIs, independent lifecycle, different teams |

Key Takeaways

1. Batch operations: Validate, submit, clear, reset all forms at once.
2. Independent instances: Each form manages its own fields, validation, and lifecycle.
3. Aggregated results: Resolve with combined validity, errors, and values.
4. Individual access: Still access each form separately via select(key).
5. Promise-based: Both validate() and submit() return Promises.
6. Flexible submit: Control whether to validate, execute hooks, or both.

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-validation](../mobx-react-form-validation/SKILL.md) — Validation setup for each form
• [mobx-react-form-multi-step](../mobx-react-form-multi-step/SKILL.md) — Alternative: single form with steps

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.