Context Events

• Form events
  • onFormSubmit
  • onFormUpdate
• Input events
  • onAfterAsyncValidation
  • onBeforeAsyncValidation
  • onInputBlur
  • onInputChange

Form events

onFormSubmit

Dispatched every time the form is about to be submitted. Accepts promise as a handler. Useful if you want, for example, perform additional validation or value changes just before sending the form.

Event data

• isPristine: T.object - true if no input changed from its original state
• errors: T.object - list of errors for the form
• warnings: T.object - list of warnings for the form
• values: T.object - list of values for the form

Expected result

undefined || Object

Event handler can return an object with new data for specific input. It will ovewrite form data before form is submitted, however will not affect the specific input.

{
  inputName: T.string,
  errors: T.object,
  warnings: T.object,
  value: T.any,
}

If errors property is not empty, form submitting will be interrupted.

Example

const handleOnFormSubmit = async ({
  values,
  errors,
  warnings,
  isPristine,
}) => {
  // event handler body
}

this.context.listenTo('onFormSubmit', handleOnFormSubmit)

---

onFormUpdate

Dispatched every time the form data is updated. For example when any of the input is changed (onChange event). Also during form submission as it can be changed for example via onFormSubmit event.

Event data

• errors: T.object - list of errors for the form
• warnings: T.object - list of warnings for the form
• isPristine: T.bool - true if no input changed from its original state
• isSubmitting: T.bool - true if form is being submiting
• isValid: T.bool - true if there is no errors in the form
• isValidating: T.bool - true if form is currently validating

Expected result

undefined

Example

const handleOnFormUpdate = ({
  errors,
  warnings,
  isPristine,
  isSubmitting,
  isValid,
  isValidating,
}) => {
  // event handler body
}

this.context.listenTo('onFormUpdate', handleOnFormUpdate)

---

Input events

onAfterAsyncValidation

Dispatched every time an input finished its asynchronous validation.

Event data

• inputName: T.string - Name of the input that finished its validation
• message: T.string - If validation fails, this property contains error message returned by validation method

Expected result

undefined

Example

const handleOnAfterAsyncValidation = ({ inputName, message }) => {
  // event handler body
}

this.context.listenTo('onAfterAsyncValidation', handleOnAfterAsyncValidation)

---

onBeforeAsyncValidation

Dispatched every time an input is going to perform its asynchronous validation.

Event data

• inputName: T.string - Name of the input that finished its validation
• value: T.any - Value of the input that will be validated

Expected result

undefined

Example

const handleOnBeforeAsyncValidation = ({ inputName, value }) => {
  // event handler body
}

this.context.listenTo('onBeforeAsyncValidation', handleOnBeforeAsyncValidation)

---

onInputBlur

Dispatched every time an input looses its focus

Event data

• inputName: T.string - Name of the input that lost his focus
• value: T.any - Value of the input
• isValid: T.bool - True if there is no errors
• errors: T.object - List of input errors
• warnings: T.object - List of input warnings

Expected result

undefined

Example

const handleOnInputBlur = ({
  inputName,
  value,
  isValid,
  errors,
  warnings,
}) => {
  // event handler body
}

this.context.listenTo('onInputBlur', handleOnInputBlur)

---

onInputChange

The same behaviour as in onInputBlur event except it is dispatched every time the input value is changed.