mobx-react-form

Reactive MobX Form State Management

Github星跟踪图

DocumentationLive DemoDemo CodeTutorialJoin Slack Workspace

MobX React Form

Reactive MobX Form State Management

Travis Build
Codecov Coverage
npm
node
GitHub license
Downloads
Downloads
Backers on Open Collective Sponsors on Open Collective

NPM

Features

  • Extensibles Validation Plugins.
  • Sync & Async Validation (w/ Promises & automatic errors).
  • Nested Fields (w/ Serialization & Validation).
  • Nested Forms (w/ Nested Submission & Validation Hooks).
  • Event Hooks, Event Handlers & Validation Hooks
  • Observers & Interceptors
  • Bindings for custom Components.
  • Support for Material UI, React Widgets, React Select & more.
  • Dedicated DevTools Package.

Quick Start

Edit form-quickstart

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

See Validation Plugins for more info on supported packages.

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

import dvr from 'mobx-react-form/lib/validators/DVR';
import validatorjs from 'validatorjs';

const plugins = {
  dvr: 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: 'required, string, same:password',
}];

You can also define fields as an object.

Define the Validation Hooks

const hooks = {
  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  },
  onError(form) {
    alert('Form has errors!');
    // get all form errors
    console.log('All form errors', form.errors());
  }
}

Initialize the Form

Simply pass the fields, plugins and hooks objects to the constructor

import MobxReactForm from 'mobx-react-form';

const myForm = new MobxReactForm({ fields }, { plugins, hooks });

Pass the myForm 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(({ myForm }) => (
  <form onSubmit={myForm.onSubmit}>
    <label htmlFor={myForm.$('email').id}>
      {myForm.$('email').label}
    </label>
    <input {...myForm.$('email').bind()} />
    <p>{myForm.$('email').error}</p>

    {/* ... other inputs ... */}

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

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

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

Extending the Form class

See how to implement the same configuration of this quickstart extending the Form class

Contributing

  1. Fork the repository
  2. Make applicable changes (with tests!)
  3. To run tests: yarn test
  4. Ensure builds succeed: yarn run build
  5. Commit via yarn to run pre-commit checks: yarn run commit

New Issues

When opening new issues, provide the setup of your form in a CodeSandbox.

These issues, and the ones which provides also PR with failing tests will get higher priority.

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! ? [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]










主要指标

概览
名称与所有者foxhound87/mobx-react-form
主编程语言TypeScript
编程语言JavaScript (语言数: 3)
平台
许可证MIT License
所有者活动
创建于2016-06-20 22:10:41
推送于2025-05-05 09:30:36
最后一次提交2025-05-05 11:29:26
发布数289
最新版本名称v6.12.1 (发布于 )
第一版名称v1.0.0 (发布于 )
用户参与
星数1.1k
关注者数21
派生数130
提交数890
已启用问题?
问题数426
打开的问题数19
拉请求数112
打开的拉请求数3
关闭的拉请求数100
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?