Modular Forms

Form

Form element that takes care of validation and simplifies submission.

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

Properties

  • of FormStore
  • onSubmit Maybe<SubmitHandler>
  • keepResponse boolean = false
  • shouldActive boolean = true
  • shouldTouched boolean = false
  • shouldDirty boolean = false
  • shouldFocus boolean = true
  • children ReactNode

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

Explanation

When the form is submitted, event.preventDefault() is executed by default to prevent the window from reloading so that the values can also be processed directly in the browser and the state of the form is preserved.

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.

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