UseForm - Controller | React Hook Form - Simple React forms validation

Controller: Component

React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and Material-UI. This wrapper component will make it easier for you to work with them.

Props

The following table contains information about all the arguments for useController.

Name	Type	Required	Description
`name`	`string`	✓	Unique name of your input.
`control`	`Object`		`control` object is from invoking `useForm`. Optional when using `FormProvider`.
`render`	`Function`		This is a render prop. 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. CodeSandbox `<Controller control={control} name="test" render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, formState, }) => ( <Checkbox onBlur={onBlur} onChange={onChange} checked={value} inputRef={ref} /> )} />` CodeSandbox `<Controller render={({ field: { onChange, onBlur, value, name, ref }, fieldState: { invalid, isTouched, isDirty, error }, }) => ( <TextField value={props.value} onChange={props.onChange} inputRef={props.ref} // wire up the input ref /> )} name="TextField" control={control} rules={{ required: true }} />`
`defaultValue`	`any`		The same as an uncontrolled component's `defaultValue`. When passing a `boolean` value, it will be treated as checkbox input. For more details, see useForm's `defaultValues` section. You need to either set `defaultValue` at the field-level or call `useForm` with `defaultValues`. If your form will invoke `reset` with default values, you will need to call `useForm` with `defaultValues` instead of setting the `defaultValue` on individual fields.
`rules`	`Object`		Validation rules in the same format as for `register`. CodeSandbox `rules={{ required: true }}`

Return

The following table contains information about properties which Controller produce.

React.RefObject

Object Name	Name	Type	Description
`field`	`onChange`	`(value: any) => void`	A function which send value to hook form and should be assigned with `onChange` prop.
	`onBlur`	`(value: any) => void`	A function which send value to hook form and should be assigned with `onBlur` prop.
	`value`	`unknown`	The value of this controlled component.
	`ref`
Assign `ref` to component's input ref, so hook form can focus on the error input.
`fieldState`	`invalid`	`boolean`	Invalid state for current input.
	`isTouched`	`boolean`	Touched state for current controlled input.
	`isDirty`	`boolean`	Dirty state for current controlled input.
	`error`	`object`	error for this specific input.
`formState`	`isSubmitSuccessful`	`boolean`	Indicate the form was successfully submitted.
	`isDirty`	`boolean`	Set to `true` after the user modifies any of the inputs.
	`isSubmitted`	`boolean`	Set to `true` after the form is submitted. Will remain `true` until the `reset` method is invoked.
	`dirtyFields`	`object`	An object with the user-modified fields. Make sure to provide all inputs' defaultValues at the useForm, so hook form can compare with the `defaultValue`.
	`touchedFields`	`object`	An object containing all the inputs the user has interacted with.
	`isSubmitting`	`boolean`	`true` if the form is currently being submitted. `false` if otherwise.
	`submitCount`	`number`	Number of times the form was submitted.
	`isValid`	`boolean`	Set to `true` if the form doesn't have any errors.
	`isValidating`	`boolean`	Set to `true` during validation.

CodeSandbox

import React from "react";
import ReactDatePicker from "react-datepicker";
import { TextField } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

function App() {
  const { handleSubmit, control } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
          />
        )}
      />
      
      <input type="submit" />
    </form>
  );
}
import React from "react";
import ReactDatePicker from "react-datepicker";
import { TextField } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

type FormValues = {
  ReactDatepicker: string;
} 

function App() {
  const { handleSubmit, control } = useForm<FormValues>();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
          />
        )}
      />
      
      <input type="submit" />
    </form>
  );
}

Tips

Do not register input again. This component is made to take care the registration process.

<Controller 
  name="test"
  render={({ field }) => {
    // return <input {...field} {...register('test')} />; ❌ double up the registration  
    return <input {...field} />; // ✅  
  }} 
/>

Customise what value gets send to hook form by transform the value during onChange.

<Controller 
  name="test"
  render={({ field }) => {
    // sending integer instead of string.
    return <input {...field} onChange={(e) => field.onChange(parseInt(e.target.value))} />;  
  }} 
/>