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
JSX.Element
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.