Formulario de gancho de reacción: el formulario es completamente opcional u obligatorio (si se completa alguno de los campos). Por favor ayuda de forma optimizada. Gracias.
Si entendí correctamente, ¿desea enviar el formulario con valores predeterminados/vacíos solo si ninguno de los campos se ha modificado y, de lo contrario, todos los campos deben tener valores completos?
Creo que el enfoque más simple sería usar el accesorio isDirty de formState para establecer el accesorio required en la función de registro.
const { register, handleSubmit, formState: { errors, isDirty }, } = useForm(); return ( <form onSubmit={handleSubmit(() => {})}> <TextField label={'optional1'} error={!!errors.optional1} {...register('optional1', { required: isDirty })} /> <TextField label={'optional2'} error={!!errors.optional2} {...register('optional2', { required: isDirty })} /> <Button color="inherit" type="submit"> Create </Button> </form> );Sin embargo, de esta manera, por ejemplo, los campos de texto permanecen sucios después de vaciar alguna entrada añadida. Por lo tanto, necesitaría agregar alguna función de reinicio de formulario, como un botón de reinicio para solucionarlo.
Aunque, en lugar de un botón de reinicio, verificaría que los valores de campo sean iguales a los valores predeterminados/vacíos. Tenga en cuenta que la verificación requerirá un poco más de código si tiene diferentes tipos de campos o diferentes valores predeterminados. Sin embargo, un botón de reinicio podría ser bueno en este caso también si tiene muchos campos.
const { register, handleSubmit, getValues, formState: { errors }, } = useForm(); const fieldValues = Object.values(getValues()); const someOptionalFilled = fieldValues.some(fieldValue => fieldValue != '') return ( <form onSubmit={handleSubmit(() => {})}> <TextField label={'optional1'} error={!!errors.optional1} {...register('optional1', { required: someOptionalFilled })} /> <TextField label={'optional2'} error={!!errors.optional2} {...register('optional2', { required: someOptionalFilled })} /> <Button color="inherit" type="submit"> Create </Button> </form> );