Skip to content

Commit 53129f5

Browse files
docs: update migration guide with renamed form methods and new metada… (#2421)
docs: update migration guide with renamed form methods and new metadata handling
1 parent 73a073b commit 53129f5

1 file changed

Lines changed: 122 additions & 0 deletions

File tree

‎docs/migrate-from-v1.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ This page is a starting checklist for migrating React apps from v1 to v2.
3131
- Keep array mutations on the `ArrayField` render prop, such as
3232
`array.pushValue(...)`, or use path-based form methods such as
3333
`form.pushFieldValue(...)` when the control lives outside the render prop.
34+
- Rename `form.moveFieldValues` to `form.moveFieldValue`, and replace removed
35+
form methods such as `setFieldMeta` and `validateField` as described in
36+
[Removed and renamed form methods](#removed-and-renamed-form-methods).
3437
- Read errors from `field.errors`, `group.state.errors`, and
3538
`form.state.errors` as validation issue objects. Use `error.message` when
3639
rendering text.
@@ -583,6 +586,125 @@ without forcing the whole list to rerender for every item value change.
583586

584587
For current usage and adapter-specific examples, see [Arrays](./arrays).
585588

589+
## Removed and renamed form methods
590+
591+
The v2 form API is smaller than v1's. It reads and updates values, mutates
592+
arrays, runs form-level validation, submits, and resets. Field metadata now
593+
lives on the field API, validators and submit results produce errors instead
594+
of code writing them directly, and nothing replaces the internal
595+
field-registry helpers.
596+
597+
| v1 | v2 |
598+
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
599+
| `moveFieldValues(name, from, to)` | `moveFieldValue(name, from, to)` |
600+
| `setFieldMeta(name, updater)` | `setFieldValue` update options, `handleSubmit()`, or `errorVisibility` |
601+
| `getFieldMeta(name)` | `field.meta` |
602+
| `resetFieldMeta(...)` | `resetField(name)`, `field.reset()`, or `reset(form.state.values, { updateDefaultValues: false })` |
603+
| `validateField(name, cause)` | validator `triggers` and `watchFields` |
604+
| `validateAllFields(cause)` | `handleSubmit()` |
605+
| `validateArrayFieldsStartingFrom(...)` | array methods run change validation unless `causeValidation: false` |
606+
| `validate(cause)` | `validate('change' \| 'blur')`, which runs form-level validators only |
607+
| `getAllErrors()` | `form.state.errors`, `field.errors`, `form.state.isValid`, or the `handleSubmit()` result |
608+
| `setErrorMap(errorMap)` | errors returned from validators, `createValidationError(...)` from `onSubmit`, or `serverState` |
609+
| `deleteField(name)` | `removeFieldValue` / `filterFieldValues` for array items, `setFieldValue` on the parent object |
610+
| `getFieldInfo(name)` | none; it exposed internal field registration |
611+
| `parseValuesWithSchema(schema)` and its `Async` variant | a schema validator plus `schemaOutputs` in `onSubmit`, or call the schema directly |
612+
| `getFormGroupMeta(name)` | `group.state` from `form.FormGroup` |
613+
614+
### Field metadata
615+
616+
v1 code often wrote field meta directly, for example to mark a field as touched
617+
when its value was set programmatically. In v2, meta is derived from updates.
618+
Pass `FieldUpdateOptions` to `setFieldValue`, the array methods, or
619+
`field.handleChange` to control what an update marks:
620+
621+
```tsx
622+
// v1
623+
form.setFieldValue('firstName', 'Ada', {
624+
dontUpdateMeta: true,
625+
dontValidate: true,
626+
})
627+
form.setFieldMeta('firstName', (prev) => ({ ...prev, isTouched: true }))
628+
```
629+
630+
```tsx
631+
// v2
632+
form.setFieldValue('firstName', 'Ada', {
633+
markAsTouched: true,
634+
markAsDirty: false,
635+
causeValidation: false,
636+
})
637+
```
638+
639+
| v1 update option | v2 update option |
640+
| ------------------ | -------------------------------------------- |
641+
| `dontUpdateMeta` | `markAsTouched: false`, `markAsDirty: false` |
642+
| `dontValidate` | `causeValidation: false` |
643+
| `dontRunListeners` | none |
644+
645+
To touch every field before showing errors, call `form.handleSubmit()`, which
646+
marks all registered fields as touched. To show errors without touching fields,
647+
configure `errorVisibility` instead.
648+
649+
Read meta from the field API, as `field.meta` in a render prop or with
650+
`useSelector(field.atom, (state) => state.meta)`. The form API does not look up
651+
meta by path.
652+
653+
To clear meta, `form.resetField(name)` and `field.reset()` reset one field's
654+
value and meta. To clear every field's meta but keep the values the user
655+
entered, reset the form to its current values without moving the default
656+
baseline:
657+
658+
```tsx
659+
form.reset(form.state.values, { updateDefaultValues: false })
660+
```
661+
662+
This also clears form-level errors, submission state, and dirty history.
663+
664+
### On-demand validation
665+
666+
v2 has no public method that validates a single field or every field outside
667+
submission. Express when a field validates through its validators instead:
668+
669+
- Use `triggers` to choose the events that run a validator.
670+
- Use `watchFields` to rerun a validator when another field changes, which
671+
covers most v1 `validateField` calls made from another field's `onChange`.
672+
- Call `form.handleSubmit()` to validate every field and the form together.
673+
Unlike `validateAllFields`, it also calls `onSubmit` when validation passes.
674+
It resolves to the error results, so an empty array means everything is
675+
valid.
676+
677+
`form.validate('change')` and `form.validate('blur')` still exist, but they run
678+
form-level validators only. Field validators do not run.
679+
680+
### Errors
681+
682+
v2 does not write error maps directly. Return errors from a validator, or from
683+
`onSubmit` with `createValidationError(...)` as shown in
684+
[Errors and submit results](#errors-and-submit-results). For server-rendered
685+
errors, pass `serverState` to `useForm`.
686+
687+
To read errors, `form.state.errors` holds form-level errors only. Errors routed
688+
to fields stay on the fields, available as `field.errors`. Use
689+
`form.state.isValid` to check both levels at once.
690+
691+
### Schemas
692+
693+
`parseValuesWithSchema` checked the current values against a schema without
694+
storing errors. To keep that behavior, call the schema yourself:
695+
696+
```tsx
697+
const result = await schema['~standard'].validate(form.state.values)
698+
699+
if (result.issues) {
700+
// handle issues
701+
}
702+
```
703+
704+
To validate with the schema and use its parsed output, add it to `validators`
705+
and read `schemaOutputs` in `onSubmit`, as described in
706+
[Standard schemas](#standard-schemas).
707+
586708
## Shared form options
587709

588710
For extracted components, v1 composition examples often use a custom

0 commit comments

Comments
 (0)