How to disable a Mui submit button integrated with Formik?

Question

I'm trying to integrate Formik with Mui in order to have a button component, as follow:

import React from "react";
import { Button } from "@mui/material";
import { useFormikContext } from "formik"; 

const ButtonWrapper = ({ children, ...otherProps }) => {
    const { submitForm } = useFormikContext();

    const handleSubmit = () => {
        submitForm();
    };

    const configButton = {
        ...otherProps,
        variant: "contained",
        color: "primary",
        fullWidth: true,
        onClick: handleSubmit,
    };

    return <Button {...configButton}>{children}</Button>;
};

export default ButtonWrapper;

This is the code snippet in which I used the above, but I wonder how could I disable the submit button in each of this two cases: 1. according to the validity of the form state, 2. when the form submittion is in progress.

<Grid item xs={12}>              
  <ButtonWrapper>Submit</ButtonWrapper>
</Grid>

I was looking that I should use isValid, isSubmitting & dirty properties but I wonder how can I implement those into the code shown first.

If this helps, this is part of the form validation.

const INITIAL_FORM_STATE = {
    name: "",
    role: "",
};
const FORM_VALIDATION = Yup.object().shape({
    name: Yup.string().required("Required").min(2, "Enter full name"),
    role: Yup.string().required("Required"),
});

const AddUsersAdmin = () => {
    return (
        <Grid container>
            <Grid item xs={12}>
                <Container maxWidth="md">
                    <div>
                        <Formik
                            initialValues={{
                                ...INITIAL_FORM_STATE,
                            }}
                            validationSchema={FORM_VALIDATION}
                            onSubmit={(values) => {
                                console.log(values);
                                console.log(values["role"]);
                            }}
                        >
                            <Form>
                                <Grid container spacing={2}>
                                    <Grid item xs={6}>
                                        <TextfieldWrapper name="name" label="Name" />
                                    </Grid>
                                    <Grid item xs={6}>
                                        <SelectWrapper name="role" label="Role" options={role} />
                                    </Grid>
                                    <Grid item xs={12}>
                                        <ButtonWrapper disabled>Submit</ButtonWrapper>
                                    </Grid>
                                </Grid>
                            </Form>
                        </Formik>
                    </div>
                </Container>
            </Grid>
        </Grid>

    );
};

Answer 1

Here is an example how you can pass the disabled props in case of invalidated form.

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  });

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="firstName" />
            <ButtonWrapper disabled={erros.length>0}>Submit</ButtonWrapper>
        </Form>
      )}
    </Formik>
  </div>
);

And as you mentioned before that in case you want to disabled it also when submiting the form , think about how to pass another props like isFetching or isLoading so you could have something like :

<ButtonWrapper disabled={erros.length>0 || isLoading}>Submit</ButtonWrapper>

In case you are using mui components, you can integrate it with formik by pass some formik props to mui components.

Example:

 <TextField
          fullWidth
          id="firstName"
          name="firstName"
          label="firstName"
          value={formik.values.firstName}
          onChange={formik.handleChange}
          error={formik.touched.firstName && Boolean(formik.errors.firstName)}
        />

For more details: https://formik.org/docs/examples/with-material-ui