Async forms and autosave#

Async form handling#

It depends on your use case if this feature is needed. But when it is, it's often a time consuming task to implement. Eufemia Forms has therefore a built-in feature that enables async form behavior.

More details about the async form behavior can be found in the async form behavior section.

Async form behavior#

This feature allows you to perform asynchronous operations such as fetching data from an API, without additional state management.

You can enable async form submit behavior on the form Form.Handler by using:

<Form.Handler onSubmit={async () => {}}>...</Form.Handler>

It will disable all fields and show an indicator on the Form.SubmitButton while the form is pending (examples).

When using Wizard.Container you can use in addition:

<Wizard.Container onStepChange={async () => {}}>...</Wizard.Container>

It will disable all fields and show an indicator on the Wizard.NextButton while the step is pending (examples).

onChange and autosave#

You can use an async function for the onChange event handler, either on the form Form.Handler:

<Form.Handler onChange={async () => {}}>...</Form.Handler>

or on every field:

<Field.PhoneNumber path="/myField" onChange={async () => {}} />

They can be used in combination as well – including async validator functions.

When the user makes a value change, it will show an indicator on the corresponding field label.

This feature cannot only be used for autosave, but for any other real-time async operations.

Here is an example of an async change behavior:

// Async event handler
const onChange = debounceAsync(async function (data) {
  try {
    await makeRequest(data)
  } catch (error) {
    return error
  }

  // Optionally, you can return an object with these keys, depending your needs
  return {
    info: 'Info message',
    warning: 'Warning message',

    // and either an error
    error: new Error('Error message'),

    // or success (when used for autosave)
    success: 'saved',
  } as const
})

More info about the async change behavior in the form Form.Handler section.

Async field validation#

A similar indicator behavior will occur when using async functions for field validation, such as onChangeValidator or onBlurValidation. Your form will exhibit async behavior, which means that the validation needs to be successfully completed before the form can be submitted.