MobX Form Schema

---

MobX Form Schema is a small library that can simplify web forms development process by providing a Form Schema concept. A form schema allows you to describe all the form logic besides user event handling. You can easily validate your form, observe its changes and simplify your communication with the backend!

You can find the MobX Form Schema documentation on the website.

Example

Just look at the short example of schema description

1import { FormSchema, watch, validate } from '@yoskutik/mobx-form-schema';
2import { required, minLength } from 'path/to/validators';
3
4class FeedbackSchema extends FormSchema {
5  @watch name = '';
6
7  @validate(required(), email())
8  @watch email = '';
9
10  @validate(required(), minLength(20))
11  @watch body = '';
12}

This schema tells, that FeedbackSchema instance will contain 3 fields: name, email and body. The email field have 2 simple rules - it is required, and must contain only email format string. The body is required as well and must be at least 20 symbols.

Schema allow you to store and handle your data. If store your data inside the schema, you can check whether the form is valid or is changed.

1import { runInAction } from 'mobx';
2const schema1 = FeedbackSchema.create();
3
4runInAction(() => schema.email = 'incorrect.email');
5console.log(schema.isValid, schema.errors);
6// false, {
7//   email: 'Invalid email format',
8//   body: 'The value is required',
9// }
10
11console.log(schema.isChanged);
12// true

And this is only the beginning!

---

Simple validation!

You can apply several validation functions for each property in a schema. And each function can generate its own error message.

Inside a validation function you can use not only current value of the field, but also entire schema as well. It can be useful, if the validation of a property depends on another property's value. For example, "confirm password" value must be the same as "password", and "from" date must happen before the "to" date.

The validation can be applied conditionally. The fields can be optional, can be hidden for some reason, or there can be cases, when the validation of one field must be skipped, because of the value of another field. And you can easily achieve such validation conditions.

The really nice part is that, by default, all the validation is applied automatically using autorun function from MobX. If a property is changed, it will be recalculated. If another property from schema, that is used in validation is changed, it will be recalculated as well. And it works with conditions too.

Simple data changes observation!

With Form Schema you can understand whether the content of your form is changed. It can be useful, when you want to provide to user an ability to understand, is the form changed, like with disabling submit button unless the form is not changed.

It also works with predefined values. And that's extremely helpful, if there's an option to edit forms with predefined values in your project. And you can also reset your forms into the initial state!

You can get the initial value of a field at any time. And you get which of the properties are changed at the moment.

You can observe not only primitive values, but also sets, arrays, nested form schemas and arrays of nested form schemas. The real cool part is that the properties aren't considered changed if you pass a set, array or schema with the exact same content. And of course resetting works with these structures as well.

And if those out-of-box structures is not enough for you, you can also you can create your own rules to observe other structures.

Simple backend communication!

With MobX Form Schema you simplify data transformations. If your schema need a bit of different data from the one in server's response, or if there's

Data preprocessing

You can use a single schema to create in instance of form with predefined values from the backend. And also you can also add a transformation function for each property to transform predefined values. For example, a server cannot send you an instance of Set or Date, and if you need it, you can easily transform the data from response.

Data postprocessing

Such data handling works in both directions. If your schema has data, which must be processed before sending to a server, you can do it as well. Your schema has some utility properties or user only fields like "Confirm password" - you can cut them off. If you use Date, but the server receives string of yyyy/MM/dd format - apply the transformation.

---

Will it work with or without React?

MobX Form Schema does not depend on React in any way. The only one thing you need in order to use it is the MobX package.

Although, MobX Form Schema can be easily integrated into any React application. You can see examples of using this package in React application:

• In the Web Documentation;
• On CodeSandbox.io;
• On StackBlitz.com.