From 79e5298008791e4d499e82711276e6f2d76015fd Mon Sep 17 00:00:00 2001 From: TropicolX Date: Wed, 10 Jul 2024 16:19:13 +0100 Subject: [PATCH 1/3] fix `field.state` code example --- docs/framework/angular/guides/basic-concepts.md | 2 +- docs/framework/react/guides/basic-concepts.md | 2 +- docs/framework/vue/guides/basic-concepts.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/framework/angular/guides/basic-concepts.md b/docs/framework/angular/guides/basic-concepts.md index d7d3a146b..b75856371 100644 --- a/docs/framework/angular/guides/basic-concepts.md +++ b/docs/framework/angular/guides/basic-concepts.md @@ -41,7 +41,7 @@ Each field has its own state, which includes its current value, validation statu Example: ```tsx -const { value, error, touched, isValidating } = field.state +const { value, meta: { errors, isValidating } } = field.state ``` There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below. diff --git a/docs/framework/react/guides/basic-concepts.md b/docs/framework/react/guides/basic-concepts.md index dc5f641e8..51045f253 100644 --- a/docs/framework/react/guides/basic-concepts.md +++ b/docs/framework/react/guides/basic-concepts.md @@ -80,7 +80,7 @@ Each field has its own state, which includes its current value, validation statu Example: ```tsx -const { value, error, touched, isValidating } = field.state +const { value, meta: { errors, isValidating } } = field.state ``` There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below. diff --git a/docs/framework/vue/guides/basic-concepts.md b/docs/framework/vue/guides/basic-concepts.md index f2ca76c00..79e07f06b 100644 --- a/docs/framework/vue/guides/basic-concepts.md +++ b/docs/framework/vue/guides/basic-concepts.md @@ -81,7 +81,7 @@ Each field has its own state, which includes its current value, validation statu Example: ```js -const { value, error, touched, isValidating } = field.state +const { value, meta: { errors, isValidating } } = field.state ``` There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below. From c31b4b2cfcfcd4d34401e45e631f43833654c1fa Mon Sep 17 00:00:00 2001 From: TropicolX Date: Wed, 10 Jul 2024 16:21:29 +0100 Subject: [PATCH 2/3] update h1 headers to h2 --- docs/framework/angular/guides/arrays.md | 2 +- docs/framework/react/guides/arrays.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/framework/angular/guides/arrays.md b/docs/framework/angular/guides/arrays.md index f37b64d6f..b232f3bdf 100644 --- a/docs/framework/angular/guides/arrays.md +++ b/docs/framework/angular/guides/arrays.md @@ -5,7 +5,7 @@ title: Arrays TanStack Form supports arrays as values in a form, including sub-object values inside of an array. -# Basic Usage +## Basic Usage To use an array, you can use `field.api.state.value` on an array value: diff --git a/docs/framework/react/guides/arrays.md b/docs/framework/react/guides/arrays.md index 0c2defecc..f48d461ac 100644 --- a/docs/framework/react/guides/arrays.md +++ b/docs/framework/react/guides/arrays.md @@ -5,7 +5,7 @@ title: Arrays TanStack Form supports arrays as values in a form, including sub-object values inside of an array. -# Basic Usage +## Basic Usage To use an array, you can use `field.state.value` on an array value: From 22fcc442dd220fce8e79793336a814d8695d3110 Mon Sep 17 00:00:00 2001 From: TropicolX Date: Wed, 10 Jul 2024 16:27:37 +0100 Subject: [PATCH 3/3] docs: removed h1 header for linked fields, added id and title for linked fields --- docs/framework/react/guides/linked-fields.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/framework/react/guides/linked-fields.md b/docs/framework/react/guides/linked-fields.md index 029444f6d..76f2d6eda 100644 --- a/docs/framework/react/guides/linked-fields.md +++ b/docs/framework/react/guides/linked-fields.md @@ -1,4 +1,7 @@ -# Link Two Form Fields Together +--- +id: linked-fields +title: Link Two Form Fields Together +--- You may find yourself needing to link two fields together; when one is validated as another field's value has changed. One such usage is when you have both a `password` and `confirm_password` field,