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