You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/framework/react/guides/basic-concepts.md
+15-16Lines changed: 15 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ This page introduces the basic concepts and terminology used in the `@tanstack/r
7
7
8
8
## Form Options
9
9
10
-
You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function.
10
+
You can customize your form by creating configuration options with the `formOptions` function. These options can be shared between multiple forms.
11
11
12
12
Example:
13
13
@@ -26,7 +26,7 @@ const formOpts = formOptions({
26
26
27
27
## Form Instance
28
28
29
-
A Form Instance is an object that represents an individual form and provides methods and properties for working with the form. You create a form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
29
+
A Form instance is an object that represents an individual form and provides methods and properties for working with the form. You create a Form instance using the `useForm` hook provided by the form options. The hook accepts an object with an `onSubmit` function, which is called when the form is submitted.
30
30
31
31
```tsx
32
32
const form =useForm({
@@ -38,7 +38,7 @@ const form = useForm({
38
38
})
39
39
```
40
40
41
-
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
41
+
You may also create a Form instance without using `formOptions` by using the standalone `useForm` API:
42
42
43
43
```tsx
44
44
interfaceUser {
@@ -59,7 +59,7 @@ const form = useForm({
59
59
60
60
## Field
61
61
62
-
A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the form.Field component provided by the form instance. The component accepts a name prop, which should match a key in the form's default values. It also accepts a children prop, which is a render prop function that takes a field object as its argument.
62
+
A Field represents a single form input element, such as a text input or a checkbox. Fields are created using the `form.Field` component provided by the Form instance. The component accepts a `name` prop, which should match a key in the form's default values. It also accepts a `children` prop, which is a render prop function that takes a `field` object as its argument.
63
63
64
64
Example:
65
65
@@ -79,7 +79,7 @@ Example:
79
79
/>
80
80
```
81
81
82
-
If you run into issues handing in children as props, make sure to check your linting rules.
82
+
If you run into issues handling `children` as props, make sure to check your linting rules.
83
83
84
84
Example (ESLint):
85
85
@@ -107,12 +107,13 @@ const {
107
107
} =field.state
108
108
```
109
109
110
-
There are four states in the metadata that can be useful to see how the user interacts with a field:
110
+
There are four states in the metadata that can be useful for seeing how the user interacts with a field:
111
111
112
-
-_"isTouched"_, after the user changes the field or blurs the field
113
-
-_"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
114
-
-_"isPristine"_, until the user changes the field value. Opposite of `isDirty`
115
-
-_"isBlurred"_, after the field has been blurred
112
+
-**isTouched**: is `true` once the user changes or blurs the field
113
+
-**isDirty**: is `true` once the field's value is changed, even if it's reverted to the default. Opposite of `isPristine`
114
+
-**isPristine**: is `true` until the user changes the field's value. Opposite of `isDirty`
115
+
-**isBlurred**: is `true` once the field loses focus (is blurred)
116
+
-**isDefaultValue**: is `true` when the field's current value is the default value
-**Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
134
135
135
-
We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
136
-
137
-
-_"isDefaultValue"_, whether the field's current value is the default value
136
+
We have chosen the persistent 'dirty' state model. However, we have introduced the `isDefaultValue` flag to also support a non-persistent 'dirty' state.
// The following line will re-create the non-Persistent `dirty` functionality.
141
+
// The following line will re-create the non-persistent `dirty` functionality.
143
142
const nonPersistentIsDirty =!isDefaultValue
144
143
```
145
144
@@ -290,7 +289,7 @@ More information can be found at [Listeners](./listeners.md)
290
289
291
290
Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.
292
291
293
-
When working with array fields, you can use the fields `pushValue`, `removeValue`, `swapValues` and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
292
+
When working with array fields, you can use the `pushValue`, `removeValue`, `swapValues`, and `moveValue` methods to add, remove, swap, and move a value from one index to another within the array, respectively. Additional helper methods such as `insertValue`, `replaceValue`, and `clearValues` are also available for inserting, replacing, and clearing array values.
294
293
295
294
Example:
296
295
@@ -370,7 +369,7 @@ Example:
370
369
371
370
## Reset Buttons
372
371
373
-
When using `<button type="reset">`in conjunction with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
372
+
When using `<button type="reset">` with TanStack Form's `form.reset()`, you need to prevent the default HTML reset behavior to avoid unexpected resets of form elements (especially `<select>` elements) to their initial HTML values.
374
373
Use `event.preventDefault()` inside the button's `onClick` handler to prevent the native form reset.
Copy file name to clipboardExpand all lines: docs/framework/react/guides/custom-errors.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ title: Custom Errors
5
5
6
6
TanStack Form provides complete flexibility in the types of error values you can return from validators. String errors are the most common and easy to work with, but the library allows you to return any type of value from your validators.
7
7
8
-
As a general rule, any truthy value is considered as an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc..) mean there is no error, the form or field is valid.
8
+
As a general rule, any truthy value is considered an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc.) mean there is no error, and the form or field is valid.
9
9
10
10
## Return String Values from Forms
11
11
@@ -133,7 +133,7 @@ Display in UI:
133
133
}
134
134
```
135
135
136
-
in the example above it depends on the event error you want to display.
136
+
In the example above, the rendered message, code and styling depend on the event error you want to display.
137
137
138
138
### Arrays
139
139
@@ -171,7 +171,7 @@ Display in UI:
171
171
172
172
## The `disableErrorFlat` Prop on Fields
173
173
174
-
By default, TanStack Form flattens errors from all validation sources (onChange, onBlur, onSubmit) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
174
+
By default, TanStack Form flattens errors from all validation sources (`onChange`, `onBlur`, `onSubmit`) into a single `errors` array. The `disableErrorFlat` prop preserves the error sources:
0 commit comments