mobx-react-form

MobX React Form

A.K.A. mobx-ajv-form (deprecated). Use mobx-react-form instead.

Automagically manage React forms state with MobX and automatic validation.

---

Changelog & Documentation

See the Changelog or the Documentation for all the details.

Install

npm install --save mobx-react-form

Demo (mobx-ajv-form)

http://www.webpackbin.com/VJZUlhWc-

Features

• Automatic Reactive Form State Management with MobX Magic
• Automatic Reactive Validation & Error Messages
• Validation Plugins & Multiple Validation Styles
• Support for Sync & Async Validation functions
• Support for Material UI, React Widgets

Usage

Define the form fields

Optionally using a default property, it will fill the field on reset instead of using the initial value.

const fields = {
  username: {
    label: 'Username',
    value: 'SteveJobs'
    default: '',
  },
  email: {
    label: 'Email',
    value: '[e-mail]'
  },
  password: {
    label: 'Password',
    value: 'thinkdifferent'
  }
};

Choose and Setup a Validation Plugin

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

See Validation Plugins and Supported Validation Packages for more info.

import validatorjs from 'validatorjs';

const plugins = { dvr: validatorjs };

Create the form

Simply pass the fields and plugins objects to the constructor

import Form from 'mobx-react-form';

...

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

Pass the form to a react component:

form.$('fieldkey') is a shortcut to form.fields.fieldkey

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

const FormComponent = ({ form, events }) => (
  <form>
    <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"
      disabled={!form.isValid}
      onClick={events.handleOnSubmit}
    >Submit</button>

    <button
      type="submit"
      onClick={events.handleOnReset}
      >Reset</button>

    <button
      type="submit"
      onClick={events.handleOnClear}
      >Clear</button>

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

export default observer(FormComponent);

Deal with events:

handleOnSubmit

  handleOnSubmit = (e) => {
    e.preventDefault();

    form.validate()
      .then((isValid) => isValid
        ? onSuccess()
        : onError());
  };

  onError() {
    // 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!');
  }

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

handleOnClear

const handleOnClear = (e) => {
  e.preventDefault();

  // clear the form
  form.clear();
}

handleOnReset

const handleOnReset = (e) => {
  e.preventDefault();

  // reset to the default initial values
  form.reset();
}

Documentation Index

• Validation Plugins
• Form Constructor
• Form Options
• Form API List
• Fields API List
• Defining the Form Fields
• Supported Validation Packages
• Remove AJV Warnings from webpack

Plugins Extensions

• Enabling JsonSchema Validation Keywords (JVK)
• Enabling Declarative Validation Rules (DVR)
• Custom JsonSchema Validation Keywords (extend)
• Custom Declarative Validation Rules (extend)
• Custom Vanilla Javascript Validation Functions
• Async JsonSchema Validation Keywords
• Async Declarative Validation Rules
• Async Vanilla Javascript Validation Functions

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!