# MobxSchemaForm
MobxSchemaForm is a React component which renders form fields as declared in json schema config object it receives. It supports the following props:
| prop | Data type | Description |
| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **model** | [FormStore](/mobx-forms/formstore/formstore-overview.md) or [modelShape](https://github.com/alexhisen/mobx-schema-form/blob/master/src/schemaFormPropTypes.js#L51) (with at minimum data and dataErrors Object properties) | MobxSchemaForm will create a [**fields** ](/mobx-forms/mobx-schema-form/mobxschemaform.md#fields)property on this object when it mounts and will delete it when it unmounts. Otherwise MobxSchemaForm just passes the model object down to each formwidget. |
| **schema** | Object | Describes the data properties of the model |
| schema.type | String | Per json-schema-form standard, this should be "object" |
| schema.title | String | Optional - arbitrary title for this schema - currently not used anywhere |
| schema.properties | Object | Each data property should have a key in this object. mobx-schema-form also supports deep/nested objects which are referenced in "parent.child" format but there are limitations in MobX FormStore when using non-flat schemas. |
| schema.properties\[key] | Object | See [Data Property Schema](/mobx-forms/mobx-schema-form/data-property-schema.md). |
| schema.required | Array | Optional unordered array of field names (i.e. keys in schema.properties object) listing data properties that are considered required. |
| **form** | Array | Ordered list of objects that drives the rendering of form widgets. Supports nesting of form widgets inside fieldsets. See [Form Field Metadata](/mobx-forms/mobx-schema-form/form-field-metadata.md) for format of each object. Instead of an Object, it's also possible to just have a String with the field name (i.e.schema.properties key) if no metadata is needed. |
| **options** | Object | Passed to react-schema-form SchemaForm in option prop. |
| options.suppressPropertyTitles (*in react-schema-form it's supress, one p)* | Boolean | If true, a field's title will not be set to its key when it's not specified in the [Data Property Schema](/mobx-forms/mobx-schema-form/data-property-schema.md). |
| options.formDefaults | Object | Default [Form Field Metadata](/mobx-forms/mobx-schema-form/form-field-metadata.md) to be used for all form fields. Merged shallowly (i.e. a validations array or validationMessage object in a given field will override the one here completely). |
| options.validators (\*) | Object with each key referencing a function. Validator functions have the call signature of [validateField](/mobx-forms/mobx-schema-form/validation.md)(). | Use this to define 'named' validator functions that can be referenced by the key in this object in [Form Field Metadata ](/mobx-forms/mobx-schema-form/form-field-metadata.md)optional validations array. Each validator function should return either a validation error message string or a tv4-form error object (i.e. with code and optional message) that will be processed using validationMessage in Form Field Metadata. |
| ignore | Object | Optional object with stringyfied schema paths as keys and true as values for this schema path to be ignored. |
| onModelChange | Function that receives the model key (i.e. the key in form metadata object or the modelKey in the corresponding schema object if defined) and the value | Optional callback that will be called whenever a widget raises an onChange event or a widget is first mounted or dismounted (in which case value will be undefined). |
| mapper | Object with each key referencing a React component/function | Optional. Maps [Form Field Metadata](/mobx-forms/mobx-schema-form/form-field-metadata.md) types (not Data Property Schema types) to React components that implement the form widget. Allows you to add custom widgets or override default ones. |
| mergeMapper (\*) | Boolean | If explicitly set to false (not undefined), provided mapper object will replace the default React-Toolbox-based mapper entirely instead of merging into it. This is useful to prevent MobxSchemaForm from requiring React-Toolbox components completely and allows you to use MobxSchemaForm without an environment configured for SASS-loading as required by React-Toolbox. |
| asArray (\*\*) | Boolean | If true, the component will return an array of rendered fields without wrapping them in a div (requires React 16.0+ if used without a child component (see below)). Otherwise, just like the original react-schema-form <0.5.0, it will wrap the fields in a div with style=width:100% and className=SchemaForm. Note that this array is not really an array of components but a React Fragment and currently cannot be iterated/traversed. |
| className (\*\*\*) | String | Optional class name for the top-level div. Defaults to "SchemaForm". |
| children (\*\*\*\*) | React Element | Optional *single* child component to which fields are passed as children, so it can further wrap each field if necessary. The Child component will go inside the SchemaForm div unless asArray=true. |
> \* = feature not present in react-schema-form. \*\* = new feature in v1.6. \*\*\* = new feature in v1.7. \*\*\*\* = new feature in v1.8.
## model.fields
MobxSchemaForm will create a fields property on the model object when MobxSchemaForm mounts (unless it already exists). For each currently mounted form field there will be a key in model.fields. The name of each key is the modelKey in the corresponding schema.properties object if defined or just the schema.propreties key. Each key references a formField object in the [formShape](https://github.com/alexhisen/mobx-schema-form/blob/master/src/schemaFormPropTypes.js#L6) format which is a specially merged combination of the [Form Field Metadata](/mobx-forms/mobx-schema-form/form-field-metadata.md) and the corresponding [Data Property Schema](/mobx-forms/mobx-schema-form/data-property-schema.md).
It is often desired to call model.refresh() when MobxSchemaForm mounts to retrieve from server existing data that needs to be edited in the form. Be sure to do this in component**Did**Mount() of your form so that model.fields are in place when the FormStore afterRefresh callback runs, so that this callback can do:
```javascript
const onlyWithValues = true;
validateForm(store.fields, store, onlyWithValues);
```
This runs form-wide validation on already filled fields (though usually server won't return invalid data back) but more importantly it will also re-populate model.data properties that got 'refreshed' with null to defaults defined in the schema.
> Note that starting with v1.6, if you mount multiple instances of MobxSchemaForm against the same FormStore model, whole-form validation will validate all fields from all mounted instances that use this model.
## model.validators
MobxSchemaForm will merge options.validators object it receives if any into model.validators.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://alexhisen.gitbook.io/mobx-forms/mobx-schema-form/mobxschemaform.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.