Skip to content

Commit 4827f43

Browse files
bluebill1049bluebill1049
committed
update doc on defaultValue
1 parent 60377ab commit 4827f43

File tree

2 files changed

+43
-42
lines changed

2 files changed

+43
-42
lines changed

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ React Hook Form embraces uncontrolled components and native inputs, however it's
1414

1515
The following table contains information about the arguments for `Controller`.
1616

17-
| Name | Type | Required | Description |
18-
| ------------------ | ------------------------------------------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19-
| `name` | <TypeText>[`FieldPath`](/ts#FieldPath "FieldPath type")</TypeText> | ✓ | Unique name of your input. |
20-
| control | <TypeText>[`Control`](/ts#Control "Control type")</TypeText> | | [`control`](/docs/useform/control) object is from invoking `useForm`. Optional when using `FormProvider`. |
21-
| `render` | <TypeText>Function</TypeText> | | This is a [render prop](https://reactjs.org/docs/render-props.html). A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides `onChange`, `onBlur`, `name`, `ref` and `value` to the child component, and also a `fieldState` object which contains specific input state. |
22-
| `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> |
23-
| `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 |
24-
| `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. |
17+
| Name | Type | Required | Description |
18+
| ------------------ | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
19+
| `name` | <TypeText>[`FieldPath`](/ts#FieldPath "FieldPath type")</TypeText> | ✓ | Unique name of your input. |
20+
| control | <TypeText>[`Control`](/ts#Control "Control type")</TypeText> | | [`control`](/docs/useform/control) object is from invoking `useForm`. Optional when using `FormProvider`. |
21+
| `render` | <TypeText>Function</TypeText> | | This is a [render prop](https://reactjs.org/docs/render-props.html). A function that returns a React element and provides the ability to attach events and value into the component. This simplifies integrating with external controlled components with non-standard prop names. Provides `onChange`, `onBlur`, `name`, `ref` and `value` to the child component, and also a `fieldState` object which contains specific input state. |
22+
| `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 |
23+
| `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. |
24+
| `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+
| `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`. If you used <code>defaultValues</code> at <code>useForm</code>, skip using this prop.</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> |
2626

2727
### Return
2828

‎src/data/api.tsx

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2752,39 +2752,6 @@ setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax t
27522752
using <code>FormProvider</code>.
27532753
</td>
27542754
</tr>
2755-
<tr>
2756-
<td>
2757-
<code>defaultValue</code>
2758-
</td>
2759-
<td>
2760-
<code className={typographyStyles.typeText}>unknown</code>
2761-
</td>
2762-
<td></td>
2763-
<td>
2764-
<p>
2765-
<b className={typographyStyles.note}>Important:</b> Can not apply{" "}
2766-
<code>undefined</code> to <code>defaultValue</code> or{" "}
2767-
<code>defaultValues</code> at <code>useForm</code>.
2768-
</p>
2769-
<ul>
2770-
<li>
2771-
<p>
2772-
You need to either set <code>defaultValue</code> at the
2773-
field-level or <code>useForm</code>'s{" "}
2774-
<code>defaultValues</code>. <code>undefined</code> is not a
2775-
valid value.
2776-
</p>
2777-
</li>
2778-
<li>
2779-
<p>
2780-
If your form will invoke <code>reset</code> with default
2781-
values, you will need to provide <code>useForm</code> with{" "}
2782-
<code>defaultValues</code>.
2783-
</p>
2784-
</li>
2785-
</ul>
2786-
</td>
2787-
</tr>
27882755
<tr>
27892756
<td>
27902757
<code>rules</code>
@@ -2842,6 +2809,40 @@ setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅ sugar syntax t
28422809
</p>
28432810
</td>
28442811
</tr>
2812+
<tr>
2813+
<td>
2814+
<code>defaultValue</code>
2815+
</td>
2816+
<td>
2817+
<code className={typographyStyles.typeText}>unknown</code>
2818+
</td>
2819+
<td></td>
2820+
<td>
2821+
<p>
2822+
<b className={typographyStyles.note}>Important:</b> Can not apply{" "}
2823+
<code>undefined</code> to <code>defaultValue</code> or{" "}
2824+
<code>defaultValues</code> at <code>useForm</code>.
2825+
</p>
2826+
<ul>
2827+
<li>
2828+
<p>
2829+
You need to either set <code>defaultValue</code> at the
2830+
field-level or <code>useForm</code>'s{" "}
2831+
<code>defaultValues</code>. <code>undefined</code> is not a
2832+
valid value. If you used <code>defaultValues</code> at{" "}
2833+
<code>useForm</code>, skip using this prop.
2834+
</p>
2835+
</li>
2836+
<li>
2837+
<p>
2838+
If your form will invoke <code>reset</code> with default
2839+
values, you will need to provide <code>useForm</code> with{" "}
2840+
<code>defaultValues</code>.
2841+
</p>
2842+
</li>
2843+
</ul>
2844+
</td>
2845+
</tr>
28452846
</tbody>
28462847
),
28472848
tips: (

0 commit comments

Comments
 (0)