How to set error validation when using useController

[stychu]

I did working setup with handlers from useForm hook. After than I wanted to extract to basic form components with the use of useController but I struggle how to handle the error state when using it. WithuseForm i have an acccess to setError and clearError which worked with my custom validation for the component but useController doesn't expose any setters. How do I. handle custom validation in this case.

I've tried the validate on useController but it doesn't trigger.

import { useState } from 'react';

import { RangeDatePicker } from '.....';
import { useController } from 'react-hook-form';

import type { FieldValues, UseControllerProps } from 'react-hook-form';

const isDateRangeInvalid = ({
  isRangeValid,
  valid,
}: {
  isRangeValid?: boolean;
  valid?: Record<string, boolean>;
}) =>
  !isRangeValid || !(!!valid && Object.keys(valid).every((key) => valid[key]));

export const DateRange = <T extends FieldValues>({
  name,
  control,
}: UseControllerProps<T>) => {
  const controller = useController({
    name,
    control,
    rules: {
      validate: (value) => {
        console.log(
          '-----------------------------START-----------------------------',
        );
        console.log(value);
        console.log(
          '-----------------------------END-----------------------------',
        );

        return value === test;
      },
    },
  });
  const [open, setOpen] = useState(false);

  const handleToggleCalendar = ({ action }: { action: 'close' | 'open' }) => {
    setOpen(action === 'open');
  };

  // const handleDateInputChange = (props: {
  //   startDate: string;
  //   endDate: string;
  //   value: string;
  //   isRangeValid?: boolean | undefined;
  //   valid?: Record<string, boolean> | undefined;
  // }) => {
  // 	clearErrors('dateRange')
  //   if (props.startDate) {
  //     setValue('dateRange.startDate', props.value);
  //   } else if (props.endDate) {
  //     setValue('dateRange.endDate', props.value);
  //   }
  //
  //   if (isDateRangeInvalid(props)) {
  //     setError('dateRange', {
  //       type: 'custom',
  //       message: 'Please enter a valid date.',
  //     });
  //   }
  // };

  return (
    <RangeDatePicker
      id={`${name}-datePicker`}
      labelText="Date range"
      open={open}
      error={controller.fieldState.invalid}
      onToggleCalendar={handleToggleCalendar}
      onDateInputChange={({ startDate, endDate, value }) => {
        controller.field.onChange({
          ...controller.field.value,
          ...(startDate ? { startDate: value } : {}),
          ...(endDate ? { endDate: value } : {}),
        });
      }}
      required
    />
  );
};

[stychu]

Well nothing that i could find that worked for me. So instead I just passed down setError clearErrors from useForm.

import { useState } from 'react';

import { RangeDatePicker } from '...';
import { useController } from 'react-hook-form';

import type { RangeDateInputChangeArgs } from '....';
import type {
  FieldValues,
  UseControllerProps,
  UseFormClearErrors,
  UseFormSetError,
} from 'react-hook-form';

const isDateRangeInvalid = ({
  isRangeValid,
  valid,
}: Partial<RangeDateInputChangeArgs>) =>
  //@ts-ignore
  !isRangeValid || !(valid && Object.keys(valid).every((key) => valid[key]));

export const DateRange = <T extends FieldValues>({
  name,
  control,
  setError,
  clearErrors,
}: UseControllerProps<T> & {
  setError: UseFormSetError<T>;
  clearErrors: UseFormClearErrors<T>;
}) => {
  const [open, setOpen] = useState(false);
  const controller = useController({ name, control });

  const handleToggleCalendar = ({ action }: { action: 'close' | 'open' }) => {
    setOpen(action === 'open');
  };

  const handleDateInputChange = ({
    startDate,
    endDate,
    value,
    ...rest
  }: Partial<RangeDateInputChangeArgs>) => {
    clearErrors(controller.field.name);

    controller.field.onChange({
      ...controller.field.value,
      ...(startDate ? { startDate: value! } : {}),
      ...(endDate ? { endDate: value! } : {}),
    });

    if (isDateRangeInvalid(rest)) {
      setError(controller.field.name, {
        type: 'custom',
        message: 'Please enter a valid date.',
      });
    }
  };

  return (
    <RangeDatePicker
      id={`${name}-datePicker`}
      labelText="Date range"
      open={open}
      error={controller.fieldState.invalid}
      onToggleCalendar={handleToggleCalendar}
      onDateInputChange={handleDateInputChange}
      required
    />
  );
};