reactjsreact-hook-form

How to conditionally disable the submit button with react-hook-form?


Couldn't find a solution.
I'm using react-hook-form and I want to disable the submit button when the forms are empty and enable as long as all forms have atleast something written in them.
How would I do that using react-hook-form?


Solution

  • const { 
        register, 
        handleSubmit, 
        formState: { isSubmitting, isDirty, isValid } // here
      } = useForm({ mode: "onChange" })
    
    
    <button
      type="submit"
      disabled={!isDirty || !isValid} // here
    >
      Comment
    </button>