External Submit button and disabling / enabling based on valid status

[ronnyek]

So basic details

• CRA app with react ^17.0.2
• Formik ^2.2.9
• Typescript

Basically I want to build a reusable form component that will sometimes be displayed in a dialog, and sometimes displayed in a page.

I'd like to use dialog buttons for submit when included in a dialog, which requires the button to be external to formik form.

I've currently got the consumer creating a ref, and passing that into innerRef, and then in my button click handler, I just do something like:

fRef?.current.handleSubmit()

This all works, but I am genuinely curious if there is a better way to do this.

I've noticed that there is nothing to prevent submission of the form, so I was now looking to set disabled status on the external submit button until the form is deemed to be valid.

Note: I've been able to see isValid hanging off the current ref, but it seems to always be true, and I'd assume I cant bind disabled on the buttons to that, as the consumer doesn't know when that value changes.

EDIT: Is there a way we can validate in the typical ways, and communicate the state of the validity of the form to the formik consumer so I can dynamically disable/enable the submit button?

Ideas/Advice?