Skip to content

Commit a10f8cb

Browse files
bluebill1049bluebill1049
committed
update error component
1 parent e739aea commit a10f8cb

1 file changed

Lines changed: 51 additions & 47 deletions

File tree

‎src/content/docs/useformstate/errormessage.mdx‎

Lines changed: 51 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,20 @@ metaDescription: Render validation error messages for a registered field. Suppor
55
sidebar: apiLinks
66
---
77

8-
## \</> `ErrorMessage:` <TypeText>Component</TypeText>
8+
## \</> `ErrorMessage:` <TypeText>Component</TypeText> <Since version="7.88.0" />
99

10-
A simple component to render associated input's error message.
11-
12-
```bash
13-
npm install @hookform/error-message
14-
```
10+
A simple component to render associated input's error message. Reads from the `control` prop when supplied, otherwise from the nearest [`FormProvider`](/docs/formprovider).
1511

1612
### Props
1713

1814
---
1915

20-
| Name | Type | Required | Description |
21-
| --------- | ------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22-
| `name` | <TypeText>string</TypeText> | ✓ | Name of the field. |
23-
| `errors` | <TypeText>object</TypeText> | | `errors` object from React Hook Form. Optional if you are using `FormProvider`. |
24-
| `message` | <TypeText>string \| React.ReactElement</TypeText> | | Inline error message. |
25-
| `as` | <TypeText>React.ElementType \| React.ReactElement \| string</TypeText> | | Wrapper component, element instance, or HTML tag. For example: `as="span"` or `as={<Text />}` |
26-
| `render` | <TypeText>`({ message: string \| React.ReactElement, messages?: Object}) => any`</TypeText> | | This is a [render prop](https://legacy.reactjs.org/docs/render-props.html) for rendering error message or messages.<br/><br/>**Note:** you need to set `criteriaMode` to 'all' for using `messages`. |
16+
| Name | Type | Required | Description |
17+
| --------- | --------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
18+
| `name` | <TypeText>string</TypeText> | ✓ | Name of the field, or a global error path (`root` or `root.*`). |
19+
| `control` | <TypeText>[Control](/ts#Control)</TypeText> | | `control` object provided by `useForm`. Optional if you are using `FormProvider`. |
20+
| `as` | <TypeText>React.ElementType</TypeText> | | Wrapper component or HTML tag. For example: `as="span"` or `as={Text}` |
21+
| `render` | <TypeText>`({ message: string, messages?: Object}) => React.ReactNode`</TypeText> | | This is a [render prop](https://legacy.reactjs.org/docs/render-props.html) for rendering error message or messages.<br/><br/>**Note:** you need to set `criteriaMode` to 'all' for using `messages`. |
2722

2823
##### Examples:
2924

@@ -34,30 +29,25 @@ npm install @hookform/error-message
3429
<TabGroup buttonLabels={["TS", "JS"]} >
3530

3631
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v7-ts-errormessage-d1ues"
37-
import { useForm } from "react-hook-form"
38-
import { ErrorMessage } from "@hookform/error-message"
32+
import { useForm, ErrorMessage } from "react-hook-form"
3933

4034
interface FormInputs {
4135
singleErrorInput: string
4236
}
4337

4438
export default function App() {
45-
const {
46-
register,
47-
formState: { errors },
48-
handleSubmit,
49-
} = useForm<FormInputs>()
39+
const { register, control, handleSubmit } = useForm<FormInputs>()
5040
const onSubmit = (data: FormInputs) => console.log(data)
5141

5242
return (
5343
<form onSubmit={handleSubmit(onSubmit)}>
5444
<input
5545
{...register("singleErrorInput", { required: "This is required." })}
5646
/>
57-
<ErrorMessage errors={errors} name="singleErrorInput" />
47+
<ErrorMessage control={control} name="singleErrorInput" />
5848

5949
<ErrorMessage
60-
errors={errors}
50+
control={control}
6151
name="singleErrorInput"
6252
render={({ message }) => <p>{message}</p>}
6353
/>
@@ -69,26 +59,21 @@ export default function App() {
6959
```
7060

7161
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-jufsl"
72-
import { useForm } from "react-hook-form"
73-
import { ErrorMessage } from "@hookform/error-message"
62+
import { useForm, ErrorMessage } from "react-hook-form"
7463

7564
export default function App() {
76-
const {
77-
register,
78-
formState: { errors },
79-
handleSubmit,
80-
} = useForm()
65+
const { register, control, handleSubmit } = useForm()
8166
const onSubmit = (data) => console.log(data)
8267

8368
return (
8469
<form onSubmit={handleSubmit(onSubmit)}>
8570
<input
8671
{...register("singleErrorInput", { required: "This is required." })}
8772
/>
88-
<ErrorMessage errors={errors} name="singleErrorInput" />
73+
<ErrorMessage control={control} name="singleErrorInput" />
8974

9075
<ErrorMessage
91-
errors={errors}
76+
control={control}
9277
name="singleErrorInput"
9378
render={({ message }) => <p>{message}</p>}
9479
/>
@@ -106,19 +91,14 @@ export default function App() {
10691
<TabGroup buttonLabels={["TS", "JS"]}>
10792

10893
```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-v6-ts-errormessage-multiple-error-messages-forked-sy5f0"
109-
import { useForm } from "react-hook-form"
110-
import { ErrorMessage } from "@hookform/error-message"
94+
import { useForm, ErrorMessage } from "react-hook-form"
11195

11296
interface FormInputs {
11397
multipleErrorInput: string
11498
}
11599

116100
export default function App() {
117-
const {
118-
register,
119-
formState: { errors },
120-
handleSubmit,
121-
} = useForm<FormInputs>({
101+
const { register, control, handleSubmit } = useForm<FormInputs>({
122102
criteriaMode: "all",
123103
})
124104
const onSubmit = (data: FormInputs) => console.log(data)
@@ -139,7 +119,7 @@ export default function App() {
139119
})}
140120
/>
141121
<ErrorMessage
142-
errors={errors}
122+
control={control}
143123
name="multipleErrorInput"
144124
render={({ messages }) =>
145125
messages &&
@@ -156,15 +136,10 @@ export default function App() {
156136
```
157137

158138
```javascript copy sandbox="https://codesandbox.io/s/react-hook-form-v7-errormessage-multiple-error-messages-lnvkt"
159-
import { useForm } from "react-hook-form"
160-
import { ErrorMessage } from "@hookform/error-message"
139+
import { useForm, ErrorMessage } from "react-hook-form"
161140

162141
export default function App() {
163-
const {
164-
register,
165-
formState: { errors },
166-
handleSubmit,
167-
} = useForm({
142+
const { register, control, handleSubmit } = useForm({
168143
criteriaMode: "all",
169144
})
170145
const onSubmit = (data) => console.log(data)
@@ -185,7 +160,7 @@ export default function App() {
185160
})}
186161
/>
187162
<ErrorMessage
188-
errors={errors}
163+
control={control}
189164
name="multipleErrorInput"
190165
render={({ messages }) =>
191166
messages &&
@@ -202,3 +177,32 @@ export default function App() {
202177
```
203178

204179
</TabGroup>
180+
181+
**With `FormProvider`**
182+
183+
```tsx copy
184+
import { useForm, FormProvider, ErrorMessage } from "react-hook-form"
185+
186+
function Field() {
187+
return <ErrorMessage name="singleErrorInput" />
188+
}
189+
190+
export default function App() {
191+
const methods = useForm()
192+
193+
return (
194+
<FormProvider {...methods}>
195+
<form onSubmit={methods.handleSubmit((data) => console.log(data))}>
196+
<input
197+
{...methods.register("singleErrorInput", {
198+
required: "This is required.",
199+
})}
200+
/>
201+
<Field />
202+
203+
<input type="submit" />
204+
</form>
205+
</FormProvider>
206+
)
207+
}
208+
```

0 commit comments

Comments
 (0)