Form Initialization

The Form Constructor can take 2 arguments in input.


First Constructor Argument

The first argument represent the fields data with their props.

Provide an object which expects the following properties:

Fields Definition
Property Description Help
struct Define fields structure with dot notation ad array notation -
fields Using Unified Properties Definition mode: an object which represents the fields with all their properties. Using Separated Properties Definition mode: an array which represents the fields structure. defining fields
Fields Properties
Property Description Help
values Object which represents the valueproperty for each field key. flat or nested
labels Object which represents the label property for each field key. flat or nested
placeholders Object which represents the placeholder property for each field key. flat or nested
initials Initial values to apply on init if the value prop is not provided. flat or nested
defaults Object which represents the default property for each field key. flat or nested
disabled Object which represents the disabled property for each field key. flat or nested
related Object which represents the related property to validate others fields at the same time for each field key. flat or nested
options Individual Field Options, with fallback on Form Options. flat or nested
extra Additional extra data for the field (useful for a select input). flat or nested
bindings The name of the binding rewriter or template which will be used for the current field. flat or nested
observers The mobx observers to listen on Fields Props or Fields Map changes. help
interceptors The mobx interceptors to listen on Fields Props or Fields Map changes. help
validateWith Specify a different Field prop to use for the Field validation. -
Fields Event Hooks & Event Handlers
Property Description Help
hooks An object with the Event Hooks functions. Availables Hooks: onInit, onChange, onToggle, onFocus, onBlur, onDrop, onSubmit, onSuccess, onError, onClear, onReset, onAdd, onDel help
handlers An object with the Event Handlers functions: Availables Handlers: onChange, onToggle, onFocus, onBlur, onDrop, onSubmit, onClear, onReset, onAdd, onDel help
Validation Properties
Property Description Help
validators The validation functions for the VJF mode. VJF
rules The rules for the validation (if DVR mode is active). DVR

Validate fields according to the choosen validation plugin

If you are using the Unified Properties Definition mode, you will need only the fields property.

If you are using the Separated Properties Definition mode, the fields property have to be defined as struct.

Second Constructor Argument

The second argument represents the form plugins and options.

Provide an object which expects the following properties:

Property Description Help
options Options used by the form or the imported plugins which may alter the validation behavior. Form Options
plugins Enable additional functionalities using external libraries. Validation Plugins
bindings Define how the fields properties are passed to the input components. Props Bindings
Form Event Hooks & Event Handlers
Property Description Help
hooks An object with the Event Hooks functions. Availables Hooks: onInit, onSubmit, onSuccess, onError, onClear, onReset, onAdd, onDel help
handlers An object with the Event Handlers functions. Availables Handlers: onSubmit, onClear, onReset, onAdd, onDel help


Constructor Usage

You can mix all the objects you need

import Form from 'mobx-react-form';

... // define all needed objects

// using unified fields properties definition
new Form({ fields });

// using validators with plugins, bindings and unified fields properties definition
new Form({ fields }, { plugins, bindings });

// using form options and separated fields properties definition
new Form({ values, labels, handlers, ... }, { options });

// using validators with plugins and separated fields properties definition
new Form({ values, labels, handlers, rules, ... }, { plugins });

Initialization Methods

setup(), options(), plugins(), bindings(), handlers(), hooks().

Normally you have to pass the fields properties to the constructor, otherwise you can implement one of these methods above inside your extended Form Class.

For example, using the setup() method you can define the fields properties:

import Form from 'mobx-react-form';

class MyForm extends MobxReactForm {

  setup() {
    // same of: new MyForm({ fields, values, labels,  ... });
    return { fields, values, labels, ... };
  }
}

The methods have to return an object with all needed props/data.

This can be done with options, plugins, bindings, handlers and hooks as well.

The object returned from the methods will be merged to the object provieded to the constructor when initializing the instance.

results matching ""

    No results matching ""