MobX Schema Form is part of a collection of loosely-coupled components for managing, rendering and validating forms in MobX-based apps.
https://alexhisen.gitbooks.io/mobx-forms/
mobx-schema-form renders form widgets (by default Material Design) based on schema and form definition in json-schema-form format. Includes intelligent real-time validation and display of validation error message in each widget.
mobx-schema-form is a syntax-compatible wrapper around the low-level utils of react-schema-form. By default, mobx-schema-form uses React-Toolbox widgets instead of material-ui and wires up the widgets to work with MobX FormStore. It also adds some improvements primarily in the area of validation.
mobx-schema-form requires React 15 or 16, MobX 2.2+, 3.x, 4.x or 5.x, mobx-react 3.5+, 4.x or 5.x and expects models to be instances of MobX FormStore or objects in the modelShape (with at minimum data and dataErrors object properties). Unlike FormStore, which is published as a UMD module to NPM, mobx-schema-form is published in CommonJS ES5 format. In addition, default use of MobxSchemaForm requires React-Toolbox, which in turn requires your environment to be able to load SASS (React-Toolbox 1.x) or PostCSS/cssnext (React-Toolbox 2.x) files via require/import - i.e. properly configured webpack.
npm install --save mobx-schema-formNote that npm will issue a warning about an unmet peer dependency of material-ui for react-schema-form. You can safely ignore it. The portion of react-schema-form we use does not require material-ui.
As of v1.7, react-toolbox is now a peer dependency, so you must install it yourself with npm install react-toolbox.
import React from 'react';
import { observer } from 'mobx-react';
import { MobxSchemaForm } from 'mobx-schema-form';
import SaveButton from 'mobx-schema-form/lib/SaveButton';
import model from './myStore.js'; // a singleton instance of MobX FormStore
/* eslint-disable quotes, quote-props, comma-dangle */
// typically this would be in an external static json file
const schemaJson = {
"schema": {
"type": "object",
"title": "MySchema",
"properties": {
"email": {
"title": "Email",
"type": "string",
"pattern": "^[A-Za-z0-9!#-'\\*\\+\\-/=\\?\\^_`\\{-~]+(\\.[A-Za-z0-9!#-'\\*\\+\\-/=\\?\\^_`\\{-~]+)*@[A-Za-z0-9!#-'\\*\\+\\-/=\\?\\^_`\\{-~]+(\\.[A-Za-z0-9!#-'\\*\\+\\-/=\\?\\^_`\\{-~]+)*$",
"validationMessage": {
"default":"Email must be of proper format: abc@xyz.com",
"302": "Email is required"
}
}
},
"required": ["email"]
},
"form": [
{
"key": "email",
"type": "email"
}
]
};
/* eslint-enable */
@observer class MyForm extends React.Component {
render() {
return (
<form>
<MobxSchemaForm
schema={schemaJson.schema}
form={schemaJson.form}
model={model}
/>
<SaveButton
model={model}
options={{ allowCreate: true, saveAll: true }}
label="Save"
disabled={!model.status.canSave}
type="submit"
/>
</form>
);
}
}Note that MobxSchemaForm uses the same props as react-schema-form's SchemaForm, except what react-schema-form calls model is actually model.data in mobx-schema-form. It also supports 'option' for compatibility with SchemaForm, though the correct form in MobxSchemaForm is 'options' plural.
If you use react-hot-loader, you may find that Radio widgets are non-functional. In the current beta of React-Toolbox 2.x, you can work-around this issue by placing this code somewhere in your app (like an index.js):
import { overrideComponentTypeChecker } from 'react-toolbox/lib/utils/is-component-of-type';
// Work-around for react-hot-loader issue in React-Toolbox - see https://github.com/react-toolbox/react-toolbox/pull/1164
overrideComponentTypeChecker((classType, reactElement) => {
return reactElement && (
reactElement.type === classType ||
reactElement.type.name === classType.displayName
);
});