File tree Expand file tree Collapse file tree 2 files changed +34
-2
lines changed Expand file tree Collapse file tree 2 files changed +34
-2
lines changed 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.
56
56
57
57
``` typescript copy sandbox="https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu"
58
58
import React from " react"
59
- import { useForm , SubmitHandler } from " react-hook-form"
59
+ import { useForm , SubmitHandler , SubmitErrorHandler } from " react-hook-form"
60
60
61
61
type FormValues = {
62
62
firstName: string
@@ -67,6 +67,7 @@ type FormValues = {
67
67
export default function App() {
68
68
const { register, handleSubmit } = useForm <FormValues >()
69
69
const onSubmit: SubmitHandler <FormValues > = (data ) => console .log (data )
70
+ const onError: SubmitErrorHandler <FormValues > = (errors ) => console .log (errors )
70
71
71
72
return (
72
73
< form onSubmit = {handleSubmit(onSubmit )}>
@@ -109,7 +110,7 @@ import { useForm } from "react-hook-form";
109
110
const sleep = ms => new Promise (resolve => setTimeout (resolve, ms));
110
111
111
112
function App () {
112
- const { register , handleSubmit , formState: { errors }, formState } = useForm ();
113
+ const { register , handleSubmit , formState: { errors } } = useForm ();
113
114
const onSubmit = async data => {
114
115
await sleep (2000 );
115
116
if (data .username === " bill" ) {
Original file line number Diff line number Diff line change @@ -84,6 +84,37 @@ export default function App() {
84
84
85
85
---
86
86
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
+
87
118
## \< /> Control { #Control }
88
119
89
120
``` typescript copy sandbox="https://codesandbox.io/s/control-2mg07"
You can’t perform that action at this time.
0 commit comments