FormContainer
Notes
A wrapping component for managing field state and form submission.
FormContainer
creates no UI, but passes it's props on to its child, which
is typically a form element. It receives a fields
configuration prop, and decorates it as
fieldsState
. Each field gains dynamic error
, wasChanged
, and wasValid
properties.
A nested input
object maintains properties for the field's associated input
.
i.e. id
, name
, required
, value
, onChange
, onBlur
.
Every change event in the child form
triggers a re-render with updated field
state (including validation).
Props
- children
node
[<div />]
- fieldsshape {required
bool
validatorfunc
}inputobject
[{}]
An object to configure fields using input
names
as the key.Validation can specified for each field in the following ways:
required: true
(default) uses thevalidateExistence
as validatorrequired: false
no validationvalidator
A custom validator function
- focusOnSubmitError
bool
Set focus on the first invalid input during submittals.
- onError
func
[() => {}]
Callback for invalid form submittals. Invoked with validation results for invalid fields.
- onFieldsStateChange
func
[() => {}]
Callback for when the field state has changed. Invoked with
fieldsState
,oldFieldsState
- onFieldUpdateFromEvent
func
[() => {}]
Callback for a when field has been updated from a dom event. Invoked with the
event
,fieldState
. - onSubmit
func
[() => {}]
Callback for valid form submittals. Invoked with form data.
- focusOnInvalidAfterAnimation
bool
Forces
focusOnFirstInvalid
to wait for animations so that focus can be properly applied.