Modular Forms

Form

Form element that takes care of validation and simplifies submission.

<Form
  of={…}
  action={…}
  onSubmit$={…}
  encType={…}
  reloadDocument={…}
  keepResponse={…}
  shouldActive={…}
  shouldTouched={…}
  shouldDirty={…}
  shouldFocus={…}
>
  children
</Form>

Properties

  • of FormStore
  • action Maybe<ActionStore<FormActionStore, PartialValues<FieldValues>, true>>
  • onSubmit$ Maybe<SubmitHandler>
  • encType Maybe<'application/x-www-form-urlencoded' | 'multipart/form-data'>
  • reloadDocument boolean = false
  • keepResponse boolean = false
  • shouldActive boolean = true
  • shouldTouched boolean = false
  • shouldDirty boolean = false
  • shouldFocus boolean = true
  • children JSX.Element

Besides the specified properties, you can pass any other property of an HTML form element.

Explanation

Before executing the onSubmit$ function, the response of the form is reset. To change this behavior you can set the keepResponse property to true.

Errors thrown by the onSubmit$ function are made available via the response property of the FormStore object to display them to your user.

If JavaScript is available, we use preventdefault:submit to prevent the page from being reloaded and send the data to the server as JSON via JavaScript using the Fetch API. To change this, you can set encType to send the data as FormData and reloadDocument to not prevent the page from reloading.

By default, the onSubmit$ function validates and provides only the values of active fields via the values parameter and focuses on the first field with an error during validation if one occurs. To change this behavior you can set the shouldActive and shouldFocus property to false.

By default, the values of fields that are not touched and not dirty are also provided via the values parameter of the onSubmit$ function. If you want only the values of the touched and/or dirty fields to be provided, you can set shouldTouched and/or shouldDirty to true.

shouldActive, shouldTouched and shouldDirty act like a kind of filter for the values parameter of the onSubmit$ function and can be combined with each other.

Edit page