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

https://mobx-react-form-demo-zgltrpjjwi.now.sh/

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, React Select

Usage

Define the form fields

const fields = {
  username: {
    label: 'Username',
    value: 'SteveJobs'
  },
  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 });

Now define a rules property on the form fields as shown here.

Pass the form to a react component

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);

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

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

handleOnClear = (e) => {
  e.preventDefault();
  // clear the form
  form.clear();
}

handleOnReset

handleOnReset = (e) => {
  e.preventDefault();
  // reset to the default initial values
  form.reset();
}

Documentation Index

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

Plugins Extensions

VALIDATION MODES

• Enabling Vanilla Javascript Validation Functions (VJF)
• Enabling Json Schema Validation Keywords (SVK)
• Enabling Declarative Validation Rules (DVR)

EXTEND VALIDATION

• Custom Vanilla Javascript Validation Functions
• Custom Json Schema Validation Keywords (extend)
• Custom Declarative Validation Rules (extend)

ASYNC VALIDATION

• Async Vanilla Javascript Validation Functions
• Async Json Schema Validation Keywords
• Async Declarative Validation Rules

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!