How to migrate isInitialValid and validateOnMount in Formik to initialErrors?

Viewed 568

Since isInitialValid is now deprecated and validateOnMount seems to be suffering from issues (flickering submit buttons across the whole app, isValid getting updated from true to false and back). Official docs seem to be less than ideal for explaining the migration away from isInitialValid, and flickering validateOnMount issues seem to be a known issue as mentioned here.

I would like to migrate forms using those two types of forms to the new ones using initialErrors. Now, to make it reusable all over the project, maybe something like a separate utility function that creates an error object from my initial Formik values and schemas (validation schema, using yup).

const validationSchema = Yup.object({ 
  firstName: Yup.string() .max(15, 'Must be 15 characters or less') .required('Required'), 
  lastName: Yup.string() .max(20, 'Must be 20 characters or less') .required('Required'), 
});

const initialValues = {
  firstName: '',
  lastName: '',
};

const MyFormIsInitialValid = () => (
  <Formik 
    initialValues={initialValues} 
    validationSchema={validationSchema} 
    isInitialValid={ true }
  />
);

const MyFormValidateOnMount = () => (
  <Formik 
    initialValues={initialValues} 
    validationSchema={validationSchema} 
    validateOnMount={ true }
  />
);

Replaced by this sort of implementation:

const MyFormInitialErrors = () => (
  <Formik 
    initialValues={initialValues} 
    validationSchema={validationSchema} 
    initialTouched={{ firstName: true, lastName: true }}
    initialErrors={{ firstName: "Required", lastName: "Required" }} /* but this being generated with the validation schema and initial values in mind */
  />

);

How can I do this properly and robustly?

Formik: 2.2.6, React: 17.0.1, Redux: 4.0.5, yup: 0.32.8

0 Answers
Related