From c4b9d5d0946e302323bd145f396e11462c620037 Mon Sep 17 00:00:00 2001 From: Martin Date: Sun, 18 Aug 2024 01:05:46 +0100 Subject: [PATCH 1/3] Added explanation for transformed data type and extended listing --- src/content/ts.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/content/ts.mdx b/src/content/ts.mdx index e5dc26a31..3c2a2f106 100644 --- a/src/content/ts.mdx +++ b/src/content/ts.mdx @@ -56,6 +56,8 @@ export default function App() { ## \ SubmitHandler {#SubmitHandler} +This type defines the shape of the data that is used in the submit handler. By default the type will be the same as the type used for `useForm` {#UseFormReturn}. When form data gets transformed via resolvers, an additional type is used as the third type parameter for `useForm`. This type should also be used for the submit handler so that the correct shape of the transformed form data is used inside the submit handler. + ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-z9z0g" import React from "react" import { useForm, SubmitHandler } from "react-hook-form" @@ -129,7 +131,8 @@ export default function App() { ```typescript copy export type UseFormReturn< TFieldValues extends FieldValues = FieldValues, - TContext = any + TContext = any, + TTransformedValues extends FieldValues = TFieldValues > = { watch: UseFormWatch getValues: UseFormGetValues From 0e18a7f7e249947b8842c7e4de5f8bcf061642ea Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 20 Aug 2024 23:43:22 +0100 Subject: [PATCH 2/3] Extended description --- src/content/ts.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/ts.mdx b/src/content/ts.mdx index 3c2a2f106..53ab225e1 100644 --- a/src/content/ts.mdx +++ b/src/content/ts.mdx @@ -56,7 +56,7 @@ export default function App() { ## \ SubmitHandler {#SubmitHandler} -This type defines the shape of the data that is used in the submit handler. By default the type will be the same as the type used for `useForm` {#UseFormReturn}. When form data gets transformed via resolvers, an additional type is used as the third type parameter for `useForm`. This type should also be used for the submit handler so that the correct shape of the transformed form data is used inside the submit handler. +This type describes the shape of the data that is passed to the submit handler. By default the type used in the angle brackets should be the same as the type used for `useForm` ({#UseFormReturn}). When form data is transformed into a different shape via resolvers, a different type that describes the new shape of the form data should be used instead. ```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-z9z0g" import React from "react" @@ -126,6 +126,8 @@ export default function App() { ## \ UseFormReturn {#UseFormReturn} +The first type used in the angle brackets describes the shape of the form data. It should be the same type used in the submit handler function ({#SubmitHandler}) unless the form data is transformed via resolvers. In that case an additional type can be used as a third parameter inside the angle brackets, which describes the shape of the form data after transformation. + ```typescript copy From ddc2e2352c01dbbac844cfa5b9b5a5e0c3e6757a Mon Sep 17 00:00:00 2001 From: Martin Date: Thu, 24 Oct 2024 23:19:26 +0200 Subject: [PATCH 3/3] Fix merge conflict --- src/content/ts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/ts.mdx b/src/content/ts.mdx index 53ab225e1..208adf3c4 100644 --- a/src/content/ts.mdx +++ b/src/content/ts.mdx @@ -134,7 +134,7 @@ The first type used in the angle brackets describes the shape of the form data. export type UseFormReturn< TFieldValues extends FieldValues = FieldValues, TContext = any, - TTransformedValues extends FieldValues = TFieldValues + TTransformedValues extends FieldValues | undefined = undefined, > = { watch: UseFormWatch getValues: UseFormGetValues