useForm - setValue | React Hook Form - Simple React forms validation

setValue: (name: string, value: unknown, config?: Object) => void

This function allows you to dynamically set the value of a registered field. At the same time, it tries to avoid unnecessary re-rerender.

Rules

Only the following conditions will trigger a re-render:
- When an error is triggered by a value update
- When an error is corrected by a value update
- When setValue is invoked for the first time and formState.isDirty is set to true
You can also set the shouldValidate parameter to true in order to trigger a field validation.
```
setValue('name', 'value', { shouldValidate: true })
```
You can also set the shouldDirty parameter to true in order to set field to dirty.
```
setValue('name', 'value', { shouldDirty: true })
```

It's recommended to target field name instead using second argument with nested object.

setValue('yourDetails.firstName', 'value'); // ✅ performant
setValue('yourDetails', { firstName: 'value' }); // less performant

It's recommended to register input name before invoke setValue. However, the following usages are still permitted.

// you can update an entire Field Array, 
// this will trigger an entire field array to be remount and refresh with updated values.
setValue('fieldArray', [{ test: '1' }, { test: '2' }]); // ✅

// you can setValue to a unregistered input
setValue('notRegisteredInput', 'value'); // ✅ prefer to be registered

// the following will register a single input (without register) 
// and update its value in case you expected to be two inputs
setValue('notRegisteredInput', { test: '1', test2: '2' }); // 🤔

// with registered inputs, the setValue will update both inputs correctly.
register('notRegisteredInput.test', '1')
register('notRegisteredInput.test2', '2')
setValue('notRegisteredInput', { test: '1', test2: '2' }); // ✅

Props

Name		Type	Description
`name`		`string`	Target on a single input by its name. Target on field array name, and it will update `fields` object and update entire field array's internal state.
`value`		`unknown`	value for the field, and make sure supply an entire array when you update useFieldArray.
`config`	`shouldValidate`	`boolean`	Should trigger validation during setting the input value.
`config`	`shouldDirty`	`boolean`	Should set the input itself to dirty.

CodeSandbox

import * as React from "react";
import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit, setValue } = useForm();

  const onSubmit = data => {
    console.log(data)
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <button onClick={() => setValue("firstName", "Bill")}>
        Set First Name Value
      </button>
      <button
        onClick={() =>
          setValue("lastName", "Luo", {
            shouldValidate: true,
            shouldDirty: true
          })
        }
      >
        Set Last Name
      </button>
      <input type="submit" />
    </form>
  );
};
import * as React from "react";
import { useForm } from "react-hook-form";

type FormInputs = {
  firstName: string
  lastName: string
}

const App = () => {
  const { register, handleSubmit, setValue } = useForm<FormInputs>();

  const onSubmit = (data: FormInputs) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName", { required: true })} />
      <input {...register("lastName", { required: true })} />
      <button onClick={() => setValue("firstName", "Bill")}>
        Set First Name Value
      </button>
      <button
        onClick={() =>
          setValue("lastName", "Luo", {
            shouldValidate: true,
            shouldDirty: true
          })
        }
      >
        Set Last Name
      </button>
      <input type="submit" />
    </form>
  );
};
import React from "react";
import { useForm } from "react-hook-form";

type FormValues = {
  string: string;
  number: number;
  object: {
    number: number;
    boolean: boolean;
  };
  array: {
    string: string;
    boolean: boolean;
  }[];
};

export default function App() {
  const { setValue } = useForm<FormValues>();
  
  setValue("string", "test");
  // function setValue<"string", string>(name: "string", value: string, shouldValidate?: boolean | undefined): void
  setValue("number", 1);
  // function setValue<"number", number>(name: "number", value: number, shouldValidate?: boolean | undefined): void
  setValue("number", "error");
  
  return <form />;
}