\r\n *
\r\n *
{fieldState.isTouched && \"Touched\"}
\r\n *
{formState.isSubmitted ? \"submitted\" : \"\"}
\r\n *
\r\n * );\r\n * }\r\n * ```\r\n */\r\nfunction useController(props) {\r\n const methods = useFormContext();\r\n const { name, control = methods.control, shouldUnregister } = props;\r\n const isArrayField = isNameInFieldArray(control._names.array, name);\r\n const value = useWatch({\r\n control,\r\n name,\r\n defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),\r\n exact: true,\r\n });\r\n const formState = useFormState({\r\n control,\r\n name,\r\n });\r\n const _registerProps = React.useRef(control.register(name, {\r\n ...props.rules,\r\n value,\r\n }));\r\n React.useEffect(() => {\r\n const updateMounted = (name, value) => {\r\n const field = get(control._fields, name);\r\n if (field) {\r\n field._f.mount = value;\r\n }\r\n };\r\n updateMounted(name, true);\r\n return () => {\r\n const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;\r\n (isArrayField\r\n ? _shouldUnregisterField && !control._stateFlags.action\r\n : _shouldUnregisterField)\r\n ? control.unregister(name)\r\n : updateMounted(name, false);\r\n };\r\n }, [name, control, isArrayField, shouldUnregister]);\r\n return {\r\n field: {\r\n name,\r\n value,\r\n onChange: React.useCallback((event) => {\r\n _registerProps.current.onChange({\r\n target: {\r\n value: getEventValue(event),\r\n name: name,\r\n },\r\n type: EVENTS.CHANGE,\r\n });\r\n }, [name]),\r\n onBlur: React.useCallback(() => {\r\n _registerProps.current.onBlur({\r\n target: {\r\n value: get(control._formValues, name),\r\n name: name,\r\n },\r\n type: EVENTS.BLUR,\r\n });\r\n }, [name, control]),\r\n ref: React.useCallback((elm) => {\r\n const field = get(control._fields, name);\r\n if (elm && field && elm.focus) {\r\n field._f.ref = {\r\n focus: () => elm.focus(),\r\n select: () => elm.select(),\r\n setCustomValidity: (message) => elm.setCustomValidity(message),\r\n reportValidity: () => elm.reportValidity(),\r\n };\r\n }\r\n }, [name, control._fields]),\r\n },\r\n formState,\r\n fieldState: Object.defineProperties({}, {\r\n invalid: {\r\n get: () => !!get(formState.errors, name),\r\n },\r\n isDirty: {\r\n get: () => !!get(formState.dirtyFields, name),\r\n },\r\n isTouched: {\r\n get: () => !!get(formState.touchedFields, name),\r\n },\r\n error: {\r\n get: () => get(formState.errors, name),\r\n },\r\n }),\r\n };\r\n}\n\n/**\r\n * Component based on `useController` hook to work with controlled component.\r\n *\r\n * @remarks\r\n * [API](https://react-hook-form.com/api/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\r\n *\r\n * @param props - the path name to the form field value, and validation rules.\r\n *\r\n * @returns provide field handler functions, field and form state.\r\n *\r\n * @example\r\n * ```tsx\r\n * function App() {\r\n * const { control } = useForm