Automagically manage React forms state with automatic validation using MobX
When we develop React apps and we need to manage the state of our Forms, we end up writing a lot of boilerplate code: setup the forms stores, defining the form fields, sync input data with the store, dealing with form validation, handling the form events and all form values and errors.
If you love the simplicity and the power of MobX (or even if you are not using it in your React project yet… give it a try!) you can accomplish all these tasks using the mobx-react-form package (here, the Live Demo or the CodeSandbox), allowing you to focus on the form data and improve the maintenance of your projects.
The package doesn’t implement custom input components, as it’s completely components-agnostic, you can use your own input components or third party components such as Material UI, React Widgets or React Select.
You can handle simple fields or complex deep nested fields as well with data serialization and straightforward and expressive API.
If you are new to MobX, don’t forget to install it on your project. Read the basics and how to use it on the Official Basic Gist documentation.
npm install --save mobx mobx-reactIf you want to deal with validation, the package supports multiple Validation Plugins. Some of them can also automatically show preset error messages, for each field. Isn’t it cool? :D
Validation Plugins
Click each to learn more about the available plugins, and choose what you prefer:
You can even mix more plugins as the package don’t forces you to use only one mode and Async validation is supported for every plugin!
Let’s install it and see how to setup a simple Login Form with email and password inputs.
npm install --save mobx-react-formI will use DVR as Validation Plugin (as I like that code style so much and it provides automatic error messages too) to check the email format and password length.
The DVR Plugin uses mikeerickson/validatorjs package which is inspired by the Laravel’s validator.
npm install --save validatorjsDefine a plugins object and pass the installed package to the DVR property.
Define a fields object to describe the form fields which will contain the Inputs Labels and the DVR Rules. Easy!
If necessary, the fields can be defined as an array of objects as well.
The package allows you to also define fields properties and validation rules separately.
We also defined a handy autoTrimValueoption to avoid users inserting white spaces. See all available form options on the docs. Options can be defined on the form instance (changing the behavior on all fields) or on a single specific field.
Now we implement the Validation Hooks which will be executed on submit after the validation is done. Create a hooks object:
Now create a new Login Form object passing all the previously created objects to it…
… and pass the form instance to your components and select the fields for each input:
npm install --save mobx-reactThe package provide some built-in and ready to use Event Handlers: onSubmit(e), onClear(e), onReset(e) & more.
We are using the bind() method on the inputs in conjunction with the “…” spread operator to automatically pass all needed properties.
Custom Bindings can be also defined if you are using custom input components with different properties.
Remember to decorate the component with the MobX observer, otherwise, it will not update when the state changes.
We are done! Go to the browser window and play with the inputs to see how the validation messages change automatically! I hope you’ll have fun!
Check out the Official Documentation for all the APIs, Plugins, implementation details, especially the section about the Form Options (which can change the behaviors of the form itself).
UPDATE
MobX React Form now provides a dedicated DevTools package.
And if you want to explore how to create complex custom components, take a look to the Demo Code Repository.
If you encounter some issue or you need support, join the Discord Channel!
