Skip to content

Commit 60ec869

Browse files
authored
docs: Add SubmitErrorHandler type to ts.mdx (#1117)
* add SubmitErrorHandler type to handleSubmit example * add SubmitErrorHandler example * remove unused formState variable in handleSubmit example * set error in field
1 parent 84c3d46 commit 60ec869

File tree

2 files changed

+34
-2
lines changed

2 files changed

+34
-2
lines changed

src/content/docs/useform/handlesubmit.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ This function will receive the form data if form validation is successful.
5656

5757
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
5858
import React from "react"
59-
import { useForm, SubmitHandler } from "react-hook-form"
59+
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
6060

6161
type FormValues = {
6262
firstName: string
@@ -67,6 +67,7 @@ type FormValues = {
6767
export default function App() {
6868
const { register, handleSubmit } = useForm<FormValues>()
6969
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
70+
const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors)
7071

7172
return (
7273
<form onSubmit={handleSubmit(onSubmit)}>
@@ -109,7 +110,7 @@ import { useForm } from "react-hook-form";
109110
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
110111

111112
function App() {
112-
const { register, handleSubmit, formState: { errors }, formState } = useForm();
113+
const { register, handleSubmit, formState: { errors } } = useForm();
113114
const onSubmit = async data => {
114115
await sleep(2000);
115116
if (data.username === "bill") {

src/content/ts.mdx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,37 @@ export default function App() {
8484

8585
---
8686

87+
## \</> SubmitErrorHandler {#SubmitErrorHandler}
88+
89+
```typescript copy
90+
import React from "react"
91+
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"
92+
93+
type FormValues = {
94+
firstName: string
95+
lastName: string
96+
email: string
97+
}
98+
99+
export default function App() {
100+
const { register, handleSubmit } = useForm<FormValues>()
101+
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
102+
const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors);
103+
104+
return (
105+
<form onSubmit={handleSubmit(onSubmit, onError)}>
106+
<input {...register("firstName"), { required: true }} />
107+
<input {...register("lastName"), { minLength: 2 }} />
108+
<input type="email" {...register("email")} />
109+
110+
<input type="submit" />
111+
</form>
112+
)
113+
}
114+
```
115+
116+
---
117+
87118
## \</> Control {#Control}
88119

89120
```typescript copy sandbox="https://codesandbox.io/s/control-2mg07"

0 commit comments

Comments
 (0)