Form disabled and readOnly states

[Kersheh]

Thought I'd throw this idea out there as a possible inclusion to the actual library/api. My team has ran into situations where it makes sense to mass-disable form fields or mass-set form fields to a readOnly state.

Both of these kind of states don't particularly need any react-hook-form integration as these states shouldn't be determined by logic embedded in the library. However, the idea dawned on me that a developer-controlled state embedded within the formState could be beneficial in certain circumstances.

As a general example of how I envisioned this being useful:

import { FormProvider, useForm, useFormContext, useFormState } from 'react-hook-form';

const FormTextInput = ({ name }: { name: string }) => {
  const { register } = useFormContext();
  const { disabled, readOnly } = useFormState();

  // up to the developer to handle styling/functionality
  // for what disabled and readOnly props actually do
  return <input {...register(name)} disabled={disabled} readOnly={readOnly} />;
};

const FormExample = () => {
  const methods = useForm({
    defaultValues: {
      exampleField: ''
    }
  });

  return (
    <FormProvider {...methods}>
      <button
        onClick={() => {
          methods.setDisabled();
          // or, if it makes sense, method is under formState
          methods.formState.setDisabled(true);
        }}
      >
        Enable/Disable form
      </button>
      <button
        onClick={() => {
          methods.setReadOnly();
          // or, if it makes sense, method is under formState
          methods.formState.setReadOnly(true);
        }}
      >
        Set readonly/remove readonly form
      </button>

      <FormTextInput name="exampleField" />
    </FormProvider>
  );
};

Thoughts? I could probably open a PR if there is interest in such a thing existing within the library. Otherwise I'm either A) going to develop a patch-package kind of monkey patch, or B) develop an "enhanced" FormProvider where I can also add these states that we can retrieve state from with a custom hook specifically for our project.

[bluebill1049]

you can use

<fieldset disbled></fieldset>, this is a tricky topic for us to cover, mainly due to external controlled component (include react native) implementation it's difficult to assume all of them support disabled prop, while its certainly easy to implement for register input which offers input reference.

[Kersheh]

So truth be told I had completely forgotten about fieldset as a wrapper for grouping forms, which definitely is a mark against the value add of the feature request idea here.

I do see potential value in embedding an easily controllable formDisabled prop you can set within formState still beyond that (easily accessing what the disabled state of the form at a nested child from useFormState), but I will take the fieldset suggestion away to at least resolve our issue within our project.

Appreciate the prompt reply!

[bluebill1049]

np, happy to see a feature request tho, we can look into different options to support both controlled component and react native.

[bluebill1049]

no action required: #8275

[fritx]

Just found useForm({ disabled }) is natively supported
https://react-hook-form.com/docs/useform#disabled