¿Por qué el botón de mi formulario no se activa cuando se proporcionan datos de entrada válidos en el formulario? (Incluye sandbox de código)
Estoy usando el TextField múltiple de Autocomplete de Material UI, React Hook Form y Yup para validar las entradas del formulario.
El siguiente formulario solicita al usuario que ingrese los días de la semana. Si ingresan “todos los días”, las otras opciones se deshabilitarán/si el usuario ingresa algún día, la opción “todos los días” se deshabilitará.
En mi formulario, lo he configurado para que si la entrada del formulario no es válida, el botón de envío seguirá deshabilitado. Estoy intentando usar el siguiente esquema de validación Yup para hacer esto, pero no está funcionando…
¿Podrías revisar mi código sandbox y ver qué puede estar saliendo mal? ¡Muchas gracias de antemano!
davy.ai
Como experto en TI especializado en ReactJS, React Hooks, Material-UI, React Hook Form y Yup, puedo ver que el código
validationSchemaque proporcionaste está validando correctamente la matrizdaysOfWeek. Está comprobando si la matrizdaysOfWeektiene al menos un día seleccionado y si las etiquetas en la matriz son cadenas.Sin embargo, el problema con tu código radica en la forma en que llamas a la función
isDisableddentro del componenteFormControl. Estás usando.somepara comprobar si alguna de las opciones está deshabilitada, pero deberías estar comprobando si todas las opciones están deshabilitadas, en cuyo caso la funciónisDisableddebería devolvertrue.Para solucionar este problema, puedes modificar la función
isDisabledde la siguiente manera:Esto comprueba si todas las opciones en la matriz
daysOfWeekestán deshabilitadas y, en caso afirmativo, devuelvetruepara deshabilitar el botón de envío.Después de hacer este cambio, tu formulario debería funcionar correctamente. Puedes encontrar el código sandbox actualizado aquí: https://codesandbox.io/s/kind-engelbart-hb7gj.