Possible to store custom data in ref with register? Or useController? So that it is accesible in validation error object of field.

[Noitidart]

When I register, I want to add some custom data to the ref, is this safe and possible?

I was thinking of doing this with useController, I am on React Native:

function MyInput({ label }) {
  const controller = useController();

  controller.field.ref.label = label;
}

My goal is, on validate, to get the label of the field and show it in a modal like:

You have errors in the following fields:
{error.ref.label} - {error.ref.message}
{error.ref.label} - {error.ref.message}
{error.ref.label} - {error.ref.message}

Hack that works, but I'm not sure if safe

I came up with this hack, it abuses setCustomValidity as that is one thing gets exposed by useController, but is it safe?

I saw setCustomValidity is exposed here - but I don't think it's used for anything so I abuse it -

react-hook-form/src/useController.ts

Line 133 in 09d51cf

setCustomValidity: (message: string) =>

const controller = useController(...);
const inputRef = useRef();

useEffect(() =>
controller.field.ref({
  setCustomValidity: (message) => {
    if (message = 'get-label') {
      return props.label;
    }
  }
}), [props.label])

return <TextInput ref={inputRef} />;

So now I can do:

const errors = useFormState();

const labelOfAmount = errors.amount.ref.setCustomValidity('set-label');

And labelOfAmount is the correct label.

[andrwo]

I am also exploring ways to make this happen. I would like to associate some data to the ref so that during my final error processing (handleSubmit ( ... , errorHandlerFn ) , I can extract some custom data related to the field.