</> getValues:
(payload?: string | string[]) => Object
An optimized helper for reading form values. The difference between watch
and getValues
is that getValues
will not trigger re-renders or subscribe to input changes.
Props
Type | Description |
---|---|
undefined | Returns the entire form values. |
string | Gets the value at path of the form values. |
array | Returns an array of the value at path of the form values. |
Examples:
The example below shows what to expect when you invoke getValues
method.
<input {...register("root.test1")} /><input {...register("root.test2")} />
Name | Output |
---|---|
getValues() | { root: { test1: '', test2: ''} } |
getValues("root") | { test1: '', test2: ''} |
getValues("root.firstName") | '' |
getValues(["yourDetails.lastName"]) | [''] |
RULES
- Disabled inputs will be returned as
undefined
. If you want to prevent users from updating the input and still retain the field value, you can usereadOnly
or disable the entire <fieldset />. Here is an example. - It will return
defaultValues
fromuseForm
before the initial render.
Examples:
import React from "react"import { useForm } from "react-hook-form"type FormInputs = {test: stringtest1: string}export default function App() {const { register, getValues } = useForm<FormInputs>()return (<form><input {...register("test")} /><input {...register("test1")} /><buttontype="button"onClick={() => {const values = getValues() // { test: "test-input", test1: "test1-input" }const singleValue = getValues("test") // "test-input"const multipleValues = getValues(["test", "test1"]) // ["test-input", "test1-input"]}}>Get Values</button></form>)}
Thank you for your support
If you find React Hook Form to be useful in your project, please consider to star and support it.