Solución:
Si quieres mantener el submit botón desactivado inicialmente cuando se carga el formulario, puede utilizar el uso del dirty : boolean propiedad de Formik algo como a continuación:
disabled={!formik.dirty}
Si quieres mantener el submit botón desactivado hasta que todos los valores de campo sean válidos, entonces puede usar isValid: boolean que funciona de la siguiente manera:
Devuelve verdadero si no hay errores (es decir, el objeto de errores está vacío) y falso en caso contrario.
Entonces puedes usarlo como:
disabled={!formik.isValid}
Ahora, si desea que el botón enviar esté deshabilitado hasta que todos los campos sean válidos y si los valores de los campos se han cambiado de sus valores iniciales entonces tendría que usar ambos atributos anteriores junto como se muestra a continuación:
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 utilizando el patrón de accesorios de renderizado, sin embargo, ahora parece ser parte de la variable de formik devuelta por el gancho useFormik.
Recomendaría comenzar eliminando los valores iniciales a una constante. Entonces necesitas acceder al objeto de error de formik. No he hecho esto usando la nueva sintaxis de gancho, sin embargo, mirando los documentos, esperaría que “formik.errors” funcione (esto se expone en formProps.errors usando accesorios de renderizado). Finalmente, la función de envío deshabilitada debe ser una verificación de que formik.values sea igual a los valores iniciales O que el objeto de errores no esté vacío.
Para tener el botón inicialmente deshabilitado, 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={!isValid || (Object.keys(touched).length === 0 && touched.constructor === Object)}