Events #

Global Form Events #

All Forms build with IU Form Library dispatch several Global Events on the window to notify "the world outside ™️" about State Changes of a Form.

You can define Listeners on the window like this

window.addEventListener('form-submit', ({ detail }) => {
  console.log(detail)
})

If you have the need to listen to the events of an specific form you can prefix the event name with the id of your form.

window.addEventListener('id-of-form-form-submit', ({ detail }) => {
  console.log(detail)
})

If you are using the VUE Form Component directly you can also listen to the defined event on your form component.

Event Types #

The following Events are available.

form-mounted #

Fires every time a value in the form gets updated detail

• form (FormContext*)

form-updated #

Fires every time a value in the form gets updated detail

• form (FormContext*)
• formData (current data of the form)

form-before-submit #

Fires before the form gets submitted detail

• form (FormContext*)
• formData (current data of the form)

form-submit #

Fires when a form is successfully submitted to the backend detail

• form (FormContext*)
• formData (current data of the form)

form-submit-for-resume #

Fires when a resume request is successfully submitted detail

• form (FormContext*)

form-submit-error #

Fires when an error occured during a form submit detail

• form (FormContext*)
• error (error object)

validation-changed #

Fires when the validations state of the whole form changes detail

• form (FormContext*)
• isValid (boolean if the form is currently valid or not)

validation-error #

Fires when a field of the form gets an new error detail

• form (FormContext*)
• errors (object with all errors of the form)

validation-group-changed #

Fires when the validations state of a group changes (Groups can be LogicGroups or Steps) detail

• form (FormContext*)
• isValid (boolean if the group is currently valid or not)
• groupName (name of the changed group)

step-changed #

Fires when the validations state of a group changes (Groups can be LogicGroups or Steps) detail

• form (FormContext*)
• isValid (boolean if the group is currently valid or not)
• groupName (name of the changed group)

* The Documentation for the FormContext Type can be found here https://vee-validate.logaretm.com/v4/api/use-form/#typescript-definition

Write Events #

You can fire some globale "write" Events on your own to set data of the form.

window.dispatchEvent(
  new CustomEvent('set-field-value', {
    detail: {
      field: 'field_name',
      value: 'value_for_field',
    },
  })
)

Like listeners, writers ca be pre-fixed with a form-id to write to a specific form instance. If you use it without the id, all form instances that are currently mounted will react to your event.

Event Types #

set-field-value #

Can be used to set a single value of a Form detail

• field (field name)
• value (value to set)

set-values #

Can be used to set a multiple values of a Form detail

• values (object with key value pairs to set)

set-step #

Can be used to set the current step of a form detail

• step (index of the step that should be shown)

Helpers #

To simplify working with those event we provide a set of helpers.

useListeners #

You can register listeners with the useListeners function like this.

import { useListeners } from '@iu/martech-forms'

const { onFormSubmit } = useListeners('id-of-form')

onFormSubmit((detail) => {
  console.log(detail)
})

The Id parameter of the useListeners call is optional if you skip it you register a listeners for all mounted forms. useListeners returns the following functions to register listeners for all global events.

• onFormMounted
• onFormBeforeSubmit
• onFormSubmit
• onFormError
• onValidationChange
• onValidationError
• onStepChange
• onFormUpdate
• onValidationGroupChange All functions accept a callback function which gets the details object of the corresponding event as an argument.

useWriters #

You can write data to a form with the useWriters function like this.

import { useWriters } from '@iu/martech-forms'

const { setFieldValue } = useWriters('id-of-form')

setFieldValue('field_name', 1234)

The Id parameter of the useWriters call is optional if you skip it you register a writer for all mounted forms. useWriters returns the following functions to register writers for all write events.

• setFieldValue(field: string, value: unknown)
• setValues(values: Record<string, unknown>)
• setActiveStep(step: string | number)