initialValues sets the first values and the ones reset goes back to. form.values always holds the current ones.
setFieldValue(path, value) changes one field and setValues(values) merges several at once. Both keep the other fields.
Fill the form from code, then reset it.
initialize(values) sets the values and makes them the new initial ones, so the form starts clean and reset goes back to them. Use it when the data arrives after the first render, such as a record fetched for editing.
onValuesChange runs after every change, but not after initialize.
Load a record, edit it and watch the changes.
reset() restores the initial values and clears the errors and the touched state.
Use onReset on the form element, or on a reset button, to do the same without calling it yourself.
onSubmit(handleValues) returns the handler for the form element. It calls preventDefault, validates, and gives handleValues the current values.
<form onSubmit={form.onSubmit((values) => save(values))} onReset={form.onReset}>
The form keeps what the fields hold, usually text. transformValues shapes the values that onSubmit hands to your handler, such as a number from a text field. form.values stays as it is, and getTransformedValues() returns the same result at any time.
The age is text in the field and a number in the submit.
| Name | Description | Type |
|---|---|---|
| values | current values | Values |
| setFieldValue | change one field by path | (path: string, value: unknown) => void |
| setValues | merge values into the current ones | (values: Partial<Values>) => void |
| initialize | set values and make them the initial ones | (values: Values) => void |
| getValues | current values, also right after a change | () => Values |
| getTransformedValues | the values after transformValues | () => Transformed |
| reset | restore the initial values and clear errors | () => void |
| onReset | reset as an event handler | (event?: FormEvent) => void |