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).
Support for Sync & Async Validation functions (w/ Promises).
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

Install

npm install --save mobx-react-form

Quick Start

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',
  rules: 'required|email|string|between:5,25',
}, {
  name: 'password',
  label: 'Password',
  rules: 'required|string|between:5,25',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  rules: 'same:password',
}];

You can also define fields as an object.

Define the Validation Events 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 Events Handler 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 those built-in and ready to use Event Handlers:

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

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

export default observer(({ form, events }) => (
  <form onSubmit={form.onSubmit}>
    <input
      type="text"
      name={form.$('username').name}
      value={form.$('username').value}
      placeholder={form.$('username').label}
      onChange={form.$('username').sync}
    />
    <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>
));

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!

levic92/mobx-react-form