mobx-formkit-composer

Skill: mobx-formkit-composer

Mission

Guide the user through using the Forms Composer utility in mobx-formkit 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-formkit/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