Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 892 Commits
.github		.github
src		src
tests		tests
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.nvmrc		.nvmrc
CHANGELOG.md		CHANGELOG.md
DOCUMENTATION.md		DOCUMENTATION.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
umd.html		umd.html
webpack.config.js		webpack.config.js

Repository files navigation

Documentation •Live Demo •Demo Code •Tutorial •Join Discord Channel

MobX React Form

Reactive MobX Form State Management

Features

ExtensiblesValidation 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
FunctionalComputed Field Props
Field PropsObservers & Interceptors
FieldProps Bindings for custom Components.
Support for Material UI, React Widgets, React Select & more.
Forms Composer: to handle multi-forms submit, validations and other actions
DedicatedDevTools Package.

Quick Start

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

Below we are creating aplugins object using thevalidatorjs package to enableDVR functionalities (Declarative Validation Rules).

importdvrfrom'mobx-react-form/lib/validators/DVR';importvalidatorjsfrom'validatorjs';constplugins={dvr:dvr({package:validatorjs})};

SeeValidation Plugins for more info on supported packages.

Define the Form Fields

Define thefields as a collection with arules property for the validation.

constfields=[{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',type:'password',},{name:'passwordConfirm',label:'Password Confirmation',placeholder:'Confirm Password',rules:'required|string|same:password',type:'password',}];

SeeFields Definitions and all availableField Props on the docs.

Define the Validation Hooks

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

See more on the docs about theValidation Hooks and theEvent Hooks

Initialize the Form

Simply pass thefields,plugins andhooks objects to the constructor

importMobxReactFormfrom'mobx-react-form';constmyForm=newMobxReactForm({ fields},{ plugins, hooks});

Learn more on the docs about theForm Instance and theForm Options

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...

importReactfrom'react';import{observer}from'mobx-react';exportdefaultobserver(({ myForm})=>(<formonSubmit={myForm.onSubmit}><labelhtmlFor={myForm.$('email').id}>{myForm.$('email').label}</label><input{...myForm.$('email').bind()}/><p>{myForm.$('email').error}</p>{/* ... other inputs ... */}<buttontype="submit"onClick={myForm.onSubmit}>Submit</button><buttontype="button"onClick={myForm.onClear}>Clear</button><buttontype="button"onClick={myForm.onReset}>Reset</button><p>{myForm.error}</p></form>));