Skip to content

Commit

Permalink
docs: Add SubmitErrorHandler type to ts.mdx (#1117)
Browse files Browse the repository at this point in the history
* add SubmitErrorHandler type to handleSubmit example

* add SubmitErrorHandler example

* remove unused formState variable in handleSubmit example

* set error in field
aken-you authored Feb 1, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 84c3d46 commit 60ec869
Showing 2 changed files with 34 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/content/docs/useform/handlesubmit.mdx
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ This function will receive the form data if form validation is successful.

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

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

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

function App() {
const { register, handleSubmit, formState: { errors }, formState } = useForm();
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = async data => {
await sleep(2000);
if (data.username === "bill") {
31 changes: 31 additions & 0 deletions src/content/ts.mdx
Original file line number Diff line number Diff line change
@@ -84,6 +84,37 @@ export default function App() {

---

## \</> SubmitErrorHandler {#SubmitErrorHandler}

```typescript copy
import React from "react"
import { useForm, SubmitHandler, SubmitErrorHandler } from "react-hook-form"

type FormValues = {
firstName: string
lastName: string
email: string
}

export default function App() {
const { register, handleSubmit } = useForm<FormValues>()
const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data)
const onError: SubmitErrorHandler<FormValues> = (errors) => console.log(errors);

return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input {...register("firstName"), { required: true }} />
<input {...register("lastName"), { minLength: 2 }} />
<input type="email" {...register("email")} />

<input type="submit" />
</form>
)
}
```

---

## \</> Control {#Control}

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

0 comments on commit 60ec869

Please sign in to comment.