How to getValues() from disabled field?

[skorphil]

<input
  {...register("test", {
    disabled: true
  })}
/>

getValues('test') returns nothing

Is there a way to get value from disabled field?

[skorphil]

watch also not working.
What the point to show value inside the disabled input but not showing it with getValues or watch?

[sujinleeme]

You must use useWatch or watch because getValues() will not trigger re-renders or subscribe to input changes.
However when you invoke the getValues() like in the onClick event you can subscribe values.

      <button
        onClick={() => {
          console.log(getValues('test'));
        }}
      />

[skorphil]

Thank you, will try it one more time, but last time I've tried watch, it did not return value from disabled field as well. Seems like all the methods ignore disabled field value

[skorphil]

@sujinleeme

You must use useWatch or watch because getValues() will not trigger re-renders or subscribe to input changes. However when you invoke the getValues() like in the onClick event you can subscribe values.

      <button
        onClick={() => {
          console.log(getValues('test'));
        }}
      />

Yeah, watch not working. My scenario is - i create field with a default value in disabled state(tu undisable later). While input is disabled, watch or getValues treat input as empty.

The only way i make it work is to disable field with chakra's props, rather than with use-hook-form

<Input
        disabled={true} // working
        {...register(`${institutionName}.name`, {
          // disabled: true, // Not working. Treated as empty by `getValues` or `watch`.
        })}
      />

[sujinleeme]

As stated in the official doc, you might need to give the isDisabled prop, however, disable also works fine as you mentioned. Also, it would be good to check the value ofdisabled returns boolean, not undefined or null.

Here is the example code
The example: When the "First Name" has error, the second field, "Last Name" will be disabled.

        <Input
          isDisabled={!!errors.firstName?.message} // Chakra input's prop
          {...register("lastName", {
            required: "This is required.",
            maxLength: {
              value: 5,
              message: "Max length should be less than 5",
            },
          })}
          placeholder="Last Name"
        />

[Moshyfawn]

RHF follows the native HTML API behaviour and sets disabled fields to undefined.

"Set disabled to true will lead input value to be undefined and input control to be disabled."