Event Hooks

The Event Hooks are called just after the execution of Event Handlers.

The lifecycle of all events is:

User Input > Event Handler / Action > Mutate Store > Event Hook.

All Event Hooks takes the current instance (Form or Field) in Input.

Triggered by Event Handlers

Event Handler	Affected Property	Executed Hook	FORM	FIELD
onChange(e)	value	onChange	YES *	YES
onToggle(e)	value	onToggle	NO	YES
onFocus(e)	focused	onFocus	NO	YES
onBlur(e)	touched	onBlur	NO	YES
onDrop(e)	files	onDrop	NO	YES

(*) next pre-release >= 5.1.0

Triggered by Event Handlers

Event Handler	Executed Action	Affected Property	Executed Hook	FORM	FIELD
onSubmit(e)	submit() > validate()	submitting, validating	onSubmit	YES	YES
onClear(e)	resetValidation() / clear()	value	onClear	YES	YES
onReset(e)	resetValidation() / reset()	value	onReset	YES	YES
onAdd(e)	add()	fields	onAdd	YES	YES
onDel(e)	del()	fields	onDel	YES	YES

We have some alternatives to deal with the Validation Hooks:

Execute code on Instance Init

The onInit hook is executed just after the instance (Form or Field) is created.

Action	Affected Property	Executed Hook	FORM	FIELD
constructor()	ALL	onInit	YES	YES

new Form({ ... }, {
  hooks: {
    onInit(form) {
      console.log('-> onInit Form HOOK');
    },
  },
})

VERSION < 1.29

Event Hooks can be used to catch an event when selecting a particular field or nested field.

We can hook these events: validate, update, clear, reset.

The callback will receive:

form.$('password').on('validate', ({ form, field, path, event, change }) => { ... });

form.$('password').on('update', ({ form, field, path, event, change }) => { ... });

form.$('password').on('clear', ({ form, field, path, event, change }) => { ... });

form.$('password').on('reset', ({ form, field, path, event, change }) => { ... });

For more info on the mobx change object take a look at the mobx Event Overview Table for the observe method.