Skip to content

Commit 5c04f3d

Browse files
bluebill1049bluebill1049
committed
Merge remote-tracking branch 'origin/master'
2 parents 7166890 + 824d8e8 commit 5c04f3d

File tree

7 files changed

+48
-45
lines changed

7 files changed

+48
-45
lines changed

‎src/components/ApiGallery.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
border: 1px solid var(--color-secondary);
4545
outline-width: 0;
4646
box-shadow: 2px 2px 0 4px #000;
47-
transform: translate(-2px,-2px);
47+
transform: translate(-2px, -2px);
4848
}
4949

5050
.gallery li a {

‎src/content/docs/usecontroller/controller.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The following table contains information about the arguments for `Controller`.
2222
| `defaultValue` | <TypeText>unknown</TypeText> | | **Important:** Can not apply `undefined` to `defaultValue` or `defaultValues` at `useForm`. <ul><li>You need to either set `defaultValue` at the field-level or `useForm`'s `defaultValues`. `undefined` is not a valid value.</li><li>If your form will invoke `reset` with default values, you will need to provide `useForm` with `defaultValues`.</li><li>Calling `onChange` with `undefined` is not valid. You should use `null` or the empty string as your default/cleared value instead.</li></ul> |
2323
| `rules` | <TypeText>Object</TypeText> | | Validation rules in the same format for [`register` options](/docs/useform/register#options), which includes:<br/><br/>required, min, max, minLength, maxLength, pattern, validate |
2424
| `shouldUnregister` | <TypeText>boolean = false`</TypeText> | | Input will be unregistered after unmount and defaultValues will be removed as well.<br/><br/>**Note:** this prop should be avoided when using with `useFieldArray` as `unregister` function gets called after input unmount/remount and reorder. |
25-
| `disabled` | <TypeText>boolean = false`</TypeText> | | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data. |
25+
| `disabled` | <TypeText>boolean = false`</TypeText> | | `disabled` prop will be returned from `field` prop. Controlled input will be disabled and its value will be omitted from the submission data. |
2626

2727
### Return
2828

‎src/content/docs/useform.mdx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ useForm({
152152
- There are other options for including form data:
153153

154154
```javascript
155-
<input {...register("hidden")} type="hidden" />
155+
;<input {...register("hidden")} type="hidden" />
156156
register("hidden", { value: "data" })
157157

158158
// include data onSubmit
@@ -420,12 +420,9 @@ const schema = z.object({
420420
type Schema = z.infer<typeof schema>
421421

422422
const App = () => {
423-
const { register, handleSubmit } =
424-
useForm <
425-
Schema >
426-
{
427-
resolver: zodResolver(schema),
428-
}
423+
const { register, handleSubmit } = useForm<Schema>({
424+
resolver: zodResolver(schema),
425+
})
429426

430427
const onSubmit = (data: Schema) => {
431428
console.log(data)

‎src/content/docs/useform/reset.mdx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ Reset the entire form state, fields reference, and subscriptions. There are opti
1414

1515
`Reset` has the ability to retain formState. Here are the options you may use:
1616

17-
| Name | Type | Description |
18-
| ------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19-
| `values` | <TypeText>object</TypeText> | An optional object to reset form values, and it's recommended to provide the **entire** defaultValues when supplied. |
20-
| `keepErrors` | <TypeText>boolean</TypeText> | All errors will remain. This will not guarantee with further user actions. |
21-
| `keepDirty` | <TypeText>boolean</TypeText> | `DirtyFields` form state will remain, and `isDirty` will temporarily remain as the current state until further user's action.<br/><br/>**Important:** this keep option doesn't reflect form input values but only dirty fields form state. |
22-
| `keepDirtyValues` | <TypeText>boolean</TypeText> | `DirtyFields` and `isDirty` will remained, and only none dirty fields will be updated to the latest rest value. [Check out the example.](https://codesandbox.io/s/react-keepdirtyvalues-o8to91)<br/><br/>**Important:** formState `dirtyFields` will need to be subscribed. |
23-
| `keepValues` | <TypeText>boolean</TypeText> | Form input values will be unchanged. |
17+
| Name | Type | Description |
18+
| ------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19+
| `values` | <TypeText>object</TypeText> | An optional object to reset form values, and it's recommended to provide the **entire** defaultValues when supplied. |
20+
| `keepErrors` | <TypeText>boolean</TypeText> | All errors will remain. This will not guarantee with further user actions. |
21+
| `keepDirty` | <TypeText>boolean</TypeText> | `DirtyFields` form state will remain, and `isDirty` will temporarily remain as the current state until further user's action.<br/><br/>**Important:** this keep option doesn't reflect form input values but only dirty fields form state. |
22+
| `keepDirtyValues` | <TypeText>boolean</TypeText> | `DirtyFields` and `isDirty` will remained, and only none dirty fields will be updated to the latest rest value. [Check out the example.](https://codesandbox.io/s/react-keepdirtyvalues-o8to91)<br/><br/>**Important:** formState `dirtyFields` will need to be subscribed. |
23+
| `keepValues` | <TypeText>boolean</TypeText> | Form input values will be unchanged. |
2424
| `keepDefaultValues` | <TypeText>boolean</TypeText> | Keep the same defaultValues which are initialised via `useForm`.<ul><li>`isDirty` will be checked again: it is set to be the result of the comparison of any new values provided against the original `defaultValues`.</li> <li>`dirtyFields` will be updated again if values are provided: it is set to be result of the comparison between the new values provided against the original `defaultValues`.</li></ul> |
25-
| `keepIsSubmitted` | <TypeText>boolean</TypeText> | `isSubmitted` state will be unchanged. |
26-
| `keepTouched` | <TypeText>boolean</TypeText> | `isTouched` state will be unchanged. |
27-
| `keepIsValid` | <TypeText>boolean</TypeText> | `isValid` will temporarily persist as the current state until additional user actions. |
28-
| `keepSubmitCount` | <TypeText>boolean</TypeText> | `submitCount` state will be unchanged. |
25+
| `keepIsSubmitted` | <TypeText>boolean</TypeText> | `isSubmitted` state will be unchanged. |
26+
| `keepTouched` | <TypeText>boolean</TypeText> | `isTouched` state will be unchanged. |
27+
| `keepIsValid` | <TypeText>boolean</TypeText> | `isValid` will temporarily persist as the current state until additional user actions. |
28+
| `keepSubmitCount` | <TypeText>boolean</TypeText> | `submitCount` state will be unchanged. |
2929

3030
<Admonition type="important" title="Rules">
3131

‎src/content/docs/usewatch.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ function App() {
125125
const { register, control } = useForm({
126126
defaultValues: {
127127
firstName: "test",
128-
}
128+
},
129129
})
130130

131131
return (

‎src/content/faqs.mdx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ React Hook Form needs a `ref` to collect the input value. However, you may want
127127
<TabGroup buttonLabels={["TS", "JS"]}>
128128

129129
```typescript copy
130-
import React, { useRef } from "react"
130+
import { useRef, useImperativeHandle } from "react"
131131
import { useForm } from "react-hook-form"
132132

133133
type Inputs = {
@@ -137,48 +137,49 @@ type Inputs = {
137137

138138
export default function App() {
139139
const { register, handleSubmit } = useForm<Inputs>()
140-
const firstNameRef = useRef<HTMLInputElement | null>(null)
141-
const onSubmit = (data) => console.log(data)
140+
const firstNameRef = useRef<HTMLInputElement>(null)
141+
const onSubmit = (data: Inputs) => console.log(data)
142142
const { ref, ...rest } = register("firstName")
143+
const onClick = () => {
144+
firstNameRef.current!.value = ""
145+
}
146+
147+
useImperativeHandle(ref, () => firstNameRef.current)
143148

144149
return (
145150
<form onSubmit={handleSubmit(onSubmit)}>
146-
<input
147-
{...rest}
148-
name="firstName"
149-
ref={(e) => {
150-
ref(e)
151-
firstNameRef.current = e // you can still assign to ref
152-
}}
153-
/>
154-
151+
<input {...rest} ref={firstNameRef} />
152+
<button type="button" onClick={onClick}>
153+
clear
154+
</button>
155155
<button>Submit</button>
156156
</form>
157157
)
158158
}
159159
```
160160

161161
```javascript copy
162-
import React, { useRef } from "react"
162+
import { useRef, useImperativeHandle } from "react"
163163
import { useForm } from "react-hook-form"
164164

165165
export default function App() {
166166
const { register, handleSubmit } = useForm()
167167
const firstNameRef = useRef(null)
168168
const onSubmit = (data) => console.log(data)
169169
const { ref, ...rest } = register("firstName")
170+
const onClick = () => {
171+
firstNameRef.current!.value = ""
172+
}
173+
174+
useImperativeHandle(ref, () => firstNameRef.current)
175+
170176

171177
return (
172178
<form onSubmit={handleSubmit(onSubmit)}>
173-
<input
174-
{...rest}
175-
name="firstName"
176-
ref={(e) => {
177-
ref(e)
178-
firstNameRef.current = e // you can still assign to ref
179-
}}
180-
/>
181-
179+
<input {...rest} ref={firstNameRef} />
180+
<button type="button" onClick={onClick}>
181+
clear
182+
</button>
182183
<button>Submit</button>
183184
</form>
184185
)

‎src/content/ts.mdx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -368,8 +368,13 @@ export type FieldError = {
368368
## \</> FieldErrors {#FieldErrors}
369369
370370
```typescript copy
371-
export type FieldErrors<TFieldValues extends FieldValues = FieldValues> =
372-
DeepMap<TFieldValues, FieldError>
371+
export type FieldErrors<T extends FieldValues = FieldValues> = Partial<
372+
FieldValues extends IsAny<FieldValues>
373+
? any
374+
: FieldErrorsImpl<DeepRequired<T>>
375+
> & {
376+
root?: Record<string, GlobalError> & GlobalError
377+
}
373378
```
374379
375380
---

0 commit comments

Comments
 (0)