Tengo un formulario creado con react-hook-form v7 y hay una cosa que no puedo hacer que funcione. El botón Enviar está deshabilitado hasta que algún campo en el formulario obtiene un valor, luego, cuando hago clic en el botón Enviar, se deshabilita para evitar enviar el formulario dos veces por error. Con el formulario enviado y el botón deshabilitado si realizo un cambio en algún campo, el botón de enviar permanece deshabilitado y eso es lo que no puedo hacer que funcione, quiero que el botón se habilite si realizo cambios en el formulario.
Este es el código del formulario:
const { control, handleSubmit, reset, formState: { errors, isDirty, isSubmitted, }, } = useForm<ISearchListFormFields>({ defaultValues: { chiefCategory: null, }, mode: 'onChange' }); <form onSubmit={handleSubmit(onSubmit)}> <div> <Label className='select-label'>Chefskategori</Label> <Controller control={control} name='chiefCategory' render={({ field: { onChange, value, ref } }) => ( <Select inputRef={ref} className='react-select-container authoritySelect' classNamePrefix='react-select' placeholder='Välj' options={categoryList} value={ categoryList.find((c) => c.value === value) ? categoryList.find((c) => c.value === value) : null } onChange={(val) => {onChange(val.value);}} /> )} /> </div> <div> <RKPrimaryButton text='Search' type='submit' disabled={!isDirty || isSubmitted} /> </div> </form>¡Gracias por cualquier ayuda!