Is there any API to get all the registered fields?

[r1ckyrockz]

Hello,

is there an api to get one ore more fields form the registered form? Because watch method returns always undefined when no defaultValue exists. (Like @hookform/devtools does)

Example:

const DummyComponent = () => {
  const { watch, register, handleSubmit } = useForm();
  
  const isInFormRegistered = isRegistered('name') // will return boolean (true = is in form registered, false = is not in form registered)
  
  return (
   <form onSubmit={handleSubmit(onSubmit)}>
        <label>Name</label>
        <input
          type="text"
          {...register("name", { required: true, maxLength: 50 })}
        />

       <div>field "name" is {isRegistered ? '' : 'not '} registered</div>
    </form
 );
}

In Package @hookform/devtools uses control to get all registered fields (_fields key), but in Documentation it says, don't do it...

Maybe there is another solution for this problem???

Thanks in advance :)

[Moshyfawn]

I don't think there's currently any straightforward API to get the registered fields without supplying defaultValues.
I'd encourage you to look into providing default form values

[ritikbanger]

You can check if your input is registered or not with the help of getValues method. getValues will not trigger re-renders or subscribe to input changes, if your input changes, go for watch.

[ritikbanger]

• When defaultValue is not defined, the first render of watch will return undefined because it is called before register, but you can set the defaultValue as the second argument or provide defaultValues via useForm to avoid this behaviour.

• If defaultValues was initialised in useForm as an argument, then the first render will return what's provided in defaultValues.

• when both defaultValue and defaultValues are supplied, defaultValue will be returned instead for the first execution before render.

• After the first render, default values will be shallowly merged with the current form values from the inputs.

[danielhammerl]

not really, getValues returns the defaultValues merged with the new values from the form, no way to check if a field is registered.

Heres an example: https://codesandbox.io/s/react-hook-form-js-forked-v8qlg?file=/src/App.js

Click on button console.logs the getValues method, and you see there are fields logged which arent registered.

OP asks for a way only get registered fields. You could get this information by reading control, but as doc says you shouldnt use control :/

[bluebill1049]

curious to know what's the usage to know registered input?

[Moshyfawn]

Pls, refer to the #7643 discussion on "registered" inputs. Maybe, share your use-case there. It's somewhat of a pain point we're trying to understand / maybe help find a better way rather than trying to get your "registered" inputs

[danielhammerl]

thanks, i will try to explain my use case in your linked discussion

[h0jeZvgoxFepBQ2C]

I'm also looking for a way to get the registered fields, but can't use the defaultValues.

Reason: I want to provide my database object (with many more keys) to react hook form as default values, but want to filter the provided keys with only the registered inputs (otherwise all other keys get submitted, I only want the keys with correlate with the inputs).

Any ideas how to solve this?

[Moshyfawn]

Try shouldUnregister: true

[Strajk]

I have the same use case as @h0jeZvgoxFepBQ2C, and although @Moshyfawn's suggestion fixes my issue, it seems a little bit hacky cause submitting only registered values is only one of many effects of that setting. And I'm worried that the other effects will cause other issues later.

Would be great to have access to the internal _fields object.

[denisqdenisq]

Hello, bringing this question back. Is there a way to get registered fields? I'm currently using unregistering of the fields but with value keeping, so in the end I have all the values even if they are unregistered at the moment.

[stellarbear]

I did not find any API either - so i just created my own
My case: get all keys that failed the validation

const keys = React.useCallback(() => {
    const result = [] as Path<T>[];
    const stack = Object.entries(form.getValues()) as [Path<T>, any][];

    while (stack.length > 0) {
      const [key, value] = stack.pop()!;

      if (value !== null && typeof value === "object") {
        const append = Object.entries(value).map(([k, v]) => [`${key}.${k}`, v] as [Path<T>, any])
        stack.push(...append);
      } else {
        result.push(key)
      }
    }

    return result;
  }, [])

[brianangulo]

We should really have a way to get register fields please. We could help with implementing if needed

[chertik77]

+1