What typescript type should I use for the rules prop?

[waxcage]

Hi,

I am wondering what type can I use for rules prop, when implementing my own RHF component.

When I use this:

import {
  type ControllerProps,
  type FieldValues,
} from "react-hook-form";

export type TextFieldElementProps<
  FormValues extends FieldValues
> = TextFieldProps & {
  rules?: ControllerProps<FormValues>["rules"];
};

then my custom validate function does not know what the field value is

<TextFieldElement<MyFormValues>
      rules={{
        validate: (value) => {
          // value type is essentially union of all possible form values for all possible field names
          ...
        },
      }}
    />

I tried creating my custom type to fix this (using FieldPathByValue):

type FormFieldRules<FormValues extends FieldValues, FieldValue> = Omit<
  RegisterOptions<FormValues, FieldPathByValue<FormValues, FieldValue>>,
  "disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber"
>;

but then I get error on Controller when passing the rules prop:

Type 'FormValues[keyof FormValues & Path<FormValues>]' is not assignable to type 'FormValues[FieldPathByValue<FormValues, FieldValue>]'.

How would you solve this issue? Is it a known problem or am I doing something wrong?

[waxcage]

Ok si this was my own fault. I just must use (and supply) FieldName generic type.

export type TextFieldElementProps<
  FormValues extends FieldValues,
  FieldName extends FieldPath<FormValues> = FieldPath<FormValues>
> = TextFieldProps & {
  rules?: ControllerProps<FormValues, FieldName >["rules"];
};

then I must create TextFieldElement component like this

<TextFieldElement<MyFormValues, "myFieldName">
  fieldName="myFieldName"
  rules={{
    validate: (value) => {
      // now typescript knows the specific value for the field
    },
  }}
/>