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.


Available Event Hooks

Triggered by Event Handlers

Event Handler Affected Property Executed Hook FORM FIELD
onChange(e) value onChange NO 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
Available Event Hooks w/ Actions

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) clear() value onClear YES YES
onReset(e) reset() value onReset YES YES
onAdd(e) add() fields onAdd YES YES
onDel(e) del() fields onDel YES YES

Validation Hooks

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:

  • The Form Instance
  • The Field Instance
  • The Field Path
  • The Event Name
  • The mobx change object
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.

results matching ""

    No results matching ""