> For the complete documentation index, see [llms.txt](https://alexhisen.gitbook.io/mobx-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alexhisen.gitbook.io/mobx-forms/mobx-schema-form/mobxschemaform.md). # 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.