✅ Zero dependencies
✅ Framework agnostic
✅ Opt-in subscriptions - only update on the state you need!
✅ 💥 3.5k gzipped 💥
npm install --save final-formor
yarn add final-form🏁 Final Form works on subscriptions to updates based on the Observer pattern. Both form and field subscribers must specify exactly which parts of the form state they want to receive updates about.
import { createForm } from 'final-form'
// Create Form
const form = createForm({
initialValues,
onSubmit, // required
validate
})
// Subscribe to form state updates
const unsubscribe = form.subscribe(
formState => {
// Update UI
},
{ // FormSubscription: the list of values you want to be updated about
dirty: true,
valid: true,
values: true
}
})
// Subscribe to field state updates
const unregisterField = form.registerField(
'username',
fieldState => {
// Update field UI
const { blur, change, focus, ...rest } = fieldState
// In addition to the values you subscribe to, field state also
// includes functions that your inputs need to update their state.
},
{ // FieldSubscription: the list of values you want to be updated about
active: true,
dirty: true,
touched: true,
valid: true,
value: true
}
)
// Submit
form.submit() // only submits if all validation passes- Examples
- Libraries
- API
- Types
ConfigDebugFunction: (state: FormState, fieldStates: { [string]: FieldState }) => voidFieldStateFieldSubscriber: (state: FieldState) => voidFieldSubscription: { [string]: boolean }FormApibatch: (fn: () => void) => void)blur: (name: string) => voidchange: (name: string, value: ?any) => voidfocus: (name: string) => voidinitialize: (values: Object) => voidgetState: () => FormStatesubmit: () => ?Promise<?Object>subscribe: (subscriber: FormSubscriber, subscription: FormSubscription) => UnsubscriberegisterField: RegisterFieldreset: () => void
FormStateFormSubscriber: (state: FormState) => voidFormSubscription: { [string]: boolean }RegisterField: (name: string, subscriber: FieldSubscriber, subscription: FieldSubscription, validate?: (value: ?any, allValues: Object) => ?any) => UnsubscribeUnsubscribe : () => void
Demonstrates how 🏁 Final Form can be used inside a React component to manage form state. It also shows just how much 🏁 React Final Form does for you out of the box.
For more examples using React, see 🏁 React Final Form Examples.
A form state management system for React that uses 🏁 Final Form under the hood.
The following can be imported from final-form.
Creates a form instance. It takes a Config and returns a
FormApi.
An à la carte list of all the possible things you can subscribe to for a field. Useful for subscribing to everything.
An à la carte list of all the possible things you can subscribe to for a form. Useful for subscribing to everything.
A special Symbol key used to return a whole-form error inside error objects
returned from validation or submission.
The current used version of 🏁 Final Form.
The initial values of your form. These will also be used to compare against the
current values to calculate pristine and dirty.
onSubmit: (values: Object, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void
Function to call when the form is submitted. There are three possible ways to
write an onSubmit function:
- Synchronously: returns
undefinedon success, or anObjectof submission errors on failure - Asynchronously with a callback: returns
undefined, callscallback()with no arguments on success, or with anObjectof submission errors on failure. - Asynchronously with a
Promise: returns aPromise<?Object>that resolves with no value on success or resolves with anObjectof submission errors on failure. The reason it resolves with errors is to leave rejection for when there is a server or communications error.
Submission errors must be in the same shape as the values of the form. You may
return a generic error for the whole form (e.g. 'Login Failed') using the
special FORM_ERROR symbol key.
A whole-record validation function that takes all the values of the form and
returns any validation errors. There are three possible ways to write a
validate function:
- Synchronously: returns
{}orundefinedwhen the values are valid, or anObjectof validation errors when the values are invalid. - Asynchronously with a
Promise: returns aPromise<?Object>that resolves with no value on success or resolves with anObjectof validation errors on failure. The reason it resolves with errors is to leave rejection for when there is a server or communications error.
Validation errors must be in the same shape as the values of the form. You may
return a generic error for the whole form using the special FORM_ERROR symbol
key.
An optional callback for debugging that returns the form state and the states of
all the fields. It's called on every state change. A typical thing to pass in
might be console.log.
If true, validation will happen on blur. If false, validation will happen on
change. Defaults to false.
FieldState is an object containing:
Whether or not the field currently has focus.
A function to blur the field (mark it as inactive).
A function to change the value of the field.
true when the value of the field is !== the initial value, false if the
values are ===.
The current validation error for this field.
A function to focus the field (mark it as active).
The initial value of the field. undefined if it was never initialized.
true if the field has a validation error or a submission error. false
otherwise.
The name of the field.
true if the current value is === to the initial value, false if the values
are !===.
The submission error for this field.
true if a form submission has been tried and failed. false otherwise.
true if the form has been successfully submitted. false otherwise.
true if this field has ever gained and lost focus. false otherwise. Useful
for knowing when to display error messages.
true if this field has no validation or submission errors. false otherwise.
true if this field has ever gained focus.
FieldSubscription is an object containing the following:
When true the FieldSubscriber will be notified of changes to the active
value in FieldState.
When true the FieldSubscriber will be notified of changes to the dirty
value in FieldState.
When true the FieldSubscriber will be notified of changes to the error
value in FieldState.
When true the FieldSubscriber will be notified of changes to the
initialValues value in FieldState.
When true the FieldSubscriber will be notified of changes to the invalid
value in FieldState.
When true the FieldSubscriber will be notified of changes to the pristine
value in FieldState.
When true the FieldSubscriber will be notified of changes to the
submitting value in FieldState.
When true the FieldSubscriber will be notified of changes to the
submitFailing value in FieldState.
When true the FieldSubscriber will be notified of changes to the
submitSucceeded value in FieldState.
When true the FieldSubscriber will be notified of changes to the valid
value in FieldState.
When true the FieldSubscriber will be notified of changes to the
validating value in FieldState.
When true the FieldSubscriber will be notified of changes to the values
value in FieldState.
Allows batch updates by silencing notifications while the fn is running.
Example:
form.batch(() => {
form.change('firstName', 'Erik') // listeners not notified
form.change('lastName', 'Rasmussen') // listeners not notified
}) // NOW all listeners notifiedBlurs (marks inactive) the given field.
Changes the value of the given field.
Focuses (marks active) the given field.
Initializes the form to the values provided. All the values will be set to these
values, and dirty and pristine will be calculated by performing a
shallow-equals between the current values and the values last initialized with.
The form will be pristine after this call.
A way to request the current state of the form without subscribing.
Submits the form if there are currently no validation errors. It may return
undefined or a Promise depending on the nature of the onSubmit
configuration value given to the form when it was created.
Subscribes to changes to the form. The subscriber will only be called when
values specified in subscription change. A form can have many subscribers.
Registers a new field and subscribes to changes to it. The subscriber will
only be called when the values specified in subscription change. More than
one subscriber can subscribe to the same field.
This is also where you may provide an optional field-level validation function
that should return undefined if the value is valid, or an error. It can
optionally return a Promise that resolves (not rejects) to undefined or an
error.
Resets the values back to the initial values the form was initialized with. Or empties all the values if the form was not initialized.
The name of the currently active field. undefined if none are active.
true if the form values are different from the values it was initialized with.
false otherwise. Comparison is done with shallow-equals.
The whole-form error returned by a validation function under the FORM_ERROR
key.
An object containing all the current validation errors. The shape will match the shape of the form's values.
The values the form was initialized with. undefined if the form was never
initialized.
true if any of the fields or the form has a validation or submission error.
false otherwise. Note that a form can be invalid even if the errors do not
belong to any currently registered fields.
true if the form values are the same as the initial values. false otherwise.
Comparison is done with shallow-equals.
The whole-form submission error returned by onSubmit under the FORM_ERROR
key.
An object containing all the current submission errors. The shape will match the shape of the form's values.
true if the form was submitted, but the submission failed with submission
errors. false otherwise.
true if the form was successfully submitted. false otherwise.
true if the form is currently being submitted asynchronously. false
otherwise.
true if neither the form nor any of its fields has a validation or submission
error. false otherwise. Note that a form can be invalid even if the errors do
not belong to any currently registered fields.
true if the form is currently being validated asynchronously. false
otherwise.
The current values of the form.
FormSubscription is an object containing the following:
When true the FormSubscriber will be notified of changes to the active
value in FormState.
When true the FormSubscriber will be notified of changes to the dirty
value in FormState.
When true the FormSubscriber will be notified of changes to the error
value in FormState.
When true the FormSubscriber will be notified of changes to the errors
value in FormState.
When true the FormSubscriber will be notified of changes to the
initialValues value in FormState.
When true the FormSubscriber will be notified of changes to the invalid
value in FormState.
When true the FormSubscriber will be notified of changes to the pristine
value in FormState.
When true the FormSubscriber will be notified of changes to the
submitError value in FormState.
When true the FormSubscriber will be notified of changes to the
submitErrors value in FormState.
When true the FormSubscriber will be notified of changes to the
submitFailed value in FormState.
When true the FormSubscriber will be notified of changes to the
submitSucceeded value in FormState.
When true the FormSubscriber will be notified of changes to the submitting
value in FormState.
When true the FormSubscriber will be notified of changes to the valid
value in FormState.
When true the FormSubscriber will be notified of changes to the validating
value in FormState.
When true the FormSubscriber will be notified of changes to the values
value in FormState.
RegisterField: (name: string, subscriber: FieldSubscriber, subscription: FieldSubscription, validate?: (value: ?any, allValues: Object) => ?any) => Unsubscribe
Unsubscribes a listener.