I resolve this like <DatePicker name={‘joinedAt’} value={values[‘joinedAt’]} onChange={e => setFieldValue(‘joinedAt’, e)} /> Update on 2020-03-08: You can use e.target.value on setFieldValue’s second prop, depends on your custom input design. Thanks to Brandon.
Hello @Aximili you can use resetForm in onSubmit. onSubmit={(values, { resetForm }) => { // do your stuff resetForm(); }} what resetForm can do? Imperatively reset the form. This will clear errors and touched, set isSubmitting to false, isValidating to false, and rerun mapPropsToValues with the current WrappedComponent’s props or what’s passed as an argument. … Read more
If you want to keep the submit button disabled initially when the form loads, you can use the use the dirty : boolean property of Formik something as below: disabled={!formik.dirty} If you want to keep the submit button disabled until all the field values are valid then you can use isValid: boolean which works as … Read more
Formik doesnot support fileupload by default, But you can try the following <input id=”file” name=”file” type=”file” onChange={(event) => { setFieldValue(“file”, event.currentTarget.files[0]); }} /> Here “file” represents the key that you are using for holding the file And on submit you can get the filename, size etc for the file by using onSubmit={(values) => { console.log({ … Read more
Check the docs You can control when Formik runs validation by changing the values of <Formik validateOnChange> and/or <Formik validateOnBlur> props depending on your needs. By default, Formik will run validation methods as follows: Pass to your Formik the props validateOnChange={false} and validateOnBlur={false}
Just for anyone wondering what’s the solution via React hooks : Formik 2.x, as explained in this answer // import this in the related component import { useFormikContext } from ‘formik’; // Then inside the component body const { submitForm } = useFormikContext(); const handleSubmit = () => { submitForm(); } Keep in mind that … Read more
This check leads to the best validation experience: Yup.string() .required() .matches(/^[0-9]+$/, “Must be only digits”) .min(5, ‘Must be exactly 5 digits’) .max(5, ‘Must be exactly 5 digits’) output: 12f1 // Must be only digits 123 // Must be exactly 5 digits 123456 // Must be exactly 5 digits 01234 // valid 11106 // valid Demo: … Read more
Check your validationSchema. I ran into this problem and found that my validator was returning something that signaled to Formik the form was invalid, but no other warnings or messages were coming up. It just wouldn’t submit. Replace that prop with validator={() => ({})} i.e. just an empty object being returned. That should pass validation … Read more
You probably aren’t defining a validation rule for the showEmail field. I’ve done a CodeSandox to test it out and as soon as I added: showEmail: yup.boolean() The form started validation correctly and no error was thrown. This is the url: https://codesandbox.io/s/74z4px0k8q And for future this was the correct validation schema: validationSchema={yup.object().shape({ showEmail: yup.boolean(), email: … Read more