Hola, descubrimos la solución a lo que necesitas, desplázate y la hallarás un poco más abajo.
Solución:
Si desea conservar la submit botón deshabilitado inicialmente cuando se carga el formulario, puede usar el dirty : boolean propiedad de Formik algo como a continuación:
disabled=!formik.dirty
Si desea conservar la submit botón deshabilitado hasta que todos los valores de campo sean válidos, entonces puede usar isValid: boolean que funciona de la siguiente manera:
Devoluciones true si no hay errores (es decir, el objeto de errores está vacío) y false de lo contrario.
Así que puedes usarlo como:
disabled=!formik.isValid
Ahora, si desea que el botón Enviar se deshabilite hasta que todos los campos sean válidos y si los valores de los campos se han cambiado de sus valores iniciales entonces tendrías que usar los dos anteriores attributes en conjunto de la siguiente manera:
disabled=!(formik.isValid && formik.dirty)
Formik realiza un seguimiento de los valores de campo y los errores, sin embargo, los expone para su uso, esto solía hacerse a través de formProps usando el patrón de render props, sin embargo, ahora parece ser parte de la variable formik devuelta por el gancho useFormik.
Recomendaría comenzar eliminando los valores iniciales a una constante. Luego, debe acceder al objeto de error de formik. No he hecho esto usando la nueva sintaxis de enlace, sin embargo, mirando los documentos, esperaría que “formik.errors” funcionara (esto está expuesto en formProps.errors usando render props). Finalmente, el botón de envío deshabilitado debe ser una verificación de que formik.values es igual a los valores iniciales O que el objeto de errores no está vacío.
Para tener el botón deshabilitado inicialmente, simplemente verifique si el objeto táctil está vacío y manténgalo así hasta que todos los campos estén validados con !isValid
disabled= (Object.keys(touched).length === 0 && touched.constructor === Object)
Comentarios y valoraciones del tutorial
Recuerda que tienes permiso de agregar una reseña si chocaste tu rompecabezas .