@uic/mobx-react-form

MobX React Form

Automagically manage React forms state and automatic validation with MobX.

Features

• Automatic Reactive Form State Management with MobX Magic.
• Automatic Reactive Validation & Error Messages.
• Validation Plugins & Multiple Validation Styles.
• Nested Fields (w/ Serialization & Validation).
• Nested Forms (w/ Nested Submission & Validation Handlers).
• Support for Sync & Async Validation functions (w/ Promises).
• Fields Props Bindings for custom Components.
• Support for Material UI, React Widgets, React Select & more.
• Dedicated DevTools Package.

TypeScript Support

A TypeScript Branch has been created. Feel free to contribute!

Documentation

https://foxhound87.github.io/mobx-react-form

Live Demo

https://foxhound87.github.io/mobx-react-form/demo.html

Demo Code

https://github.com/foxhound87/mobx-react-form-demo

Tutorial

Automagically manage React forms state and automatic validation with MobX

Quick Start

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

See Validation Plugins & Modes and Supported Validation Packages for more info.

Below we are creating a plugins object using the validatorjs package to enable DVR functionalities (Declarative Validation Rules).

import validatorjs from 'validatorjs';

const plugins = { dvr: validatorjs };

Define the Form Fields

Define the fields as a collection with a rules property for the validation.

const fields = [{
  name: 'email',
  label: 'Email',
  placeholder: 'Insert Email',
  rules: 'required|email|string|between:5,25',
}, {
  name: 'password',
  label: 'Password',
  placeholder: 'Insert Password',
  rules: 'required|string|between:5,25',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  placeholder: 'Confirm Password',
  rules: 'same:password',
}];

You can also define fields as an object.

Define the Validation Handlers

import MobxReactForm from 'mobx-react-form';

class MyForm extends MobxReactForm {

  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  }

  onError(form) {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
  }
}

The Validation Handlers can be decoupled from the class as well.

Initialize the Form

Simply pass the fields and plugins objects to the constructor

export default new MyForm({ fields }, { plugins });

Pass the form to a react component

The package provide some built-in and ready to use Event Handlers:

onSubmit(e), onClear(e), onReset(e) & more...

import React from 'react';
import { observer } from 'mobx-react';

export default observer(({ form }) => (
  <form onSubmit={form.onSubmit}>
    <label htmlFor={form.$('username').id}>
      {form.$('username').label}
    </label>
    <input {...form.$('username').bind()} />
    <p>{form.$('username').error}</p>

    ...

    <button type="submit" onClick={form.onSubmit}>Submit</button>
    <button type="button" onClick={form.onClear}>Clear</button>
    <button type="button" onClick={form.onReset}>Reset</button>

    <p>{form.error}</p>
  </form>
));

Other Field Props are available. See the docs for more details.

Contributing

If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.

And don't forget to star the repo, I will ensure more frequent updates! Thanks!