mobx-react-form

MobX React Form

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

Automagically manage React forms state and automatic validation with MobX.

---

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-bbtfrgtrzh.now.sh

Tutorial

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
• Support for Sync & Async Validation functions
• Support for Material UI, React Widgets, React Select

Usage

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

Define the Form Fields

Also define a rules property on the form fields.

const fields = {
  email: {
    label: 'Email',
    rules: 'required|email|string|between:5,25',
  },
  password: {
    label: 'Password',
    rules: 'required|string|between:5,25',
  },
};

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!');
  }
}

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 build-in and ready to use Event Handlers:

handleOnSubmit(e), handleOnSuccess(e), handleOnError(e).

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" onClick={form.handleOnSubmit}>Submit</button>
    <button type="button" onClick={form.handleOnClear}>Clear</button>
    <button type="button" onClick={form.handleOnReset}>Reset</button>

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

export default observer(FormComponent);

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

Documentation Index

• Defining the Form Fields
• Form Initialization
• Form Actions
• Form Events
• Form Options
• Validation Plugins
• 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!