I solved my problem rendering my modal component inside my Fomik functional component. And then, for the callBack of my modal component I just wrote a method that will receive the Formiks setFieldValue reference. Then was possible to manually set the data into Formik’s state: My Modal Component inside Formik’s component: <Formik enableReinitialize={true} initialValues={props.quoteData} validationSchema={QuoteFormSchema} … Read more
For some reason this is Formik’s default behaviour, and you need to supply the enableReinitialize prop to override it: https://github.com/jaredpalmer/formik/issues/811
Your problem is that handleChange won’t work the way you are doing. If you take a look at the handleChange docs: General input change event handler. This will update the values[key] where key is the event-emitting input’s name attribute. If the name attribute is not present, handleChange will look for an input’s id attribute. Note: … Read more
@djheru Your solution is correct because Formik sets touched flags on blur event instead of on change. Here is Formik author comment about this: You have to call Formiks handleBlur to notify Formik that blur event has been triggered – so yes, these handlers are needed.
Here is how I did it import { object, string, mixed } from “yup” const schema = object().shape({ attachment: mixed().test(“fileSize”, “The file is too large”, (value) => { if (!value.length) return true // attachment is optional return value[0].size <= 2000000 }), })
Just to elaborate on efleurine’s answer. You do not need to store each validation on the same field – you can chain them to get a full validation. password: Yup.string() .required(‘No password provided.’) .min(8, ‘Password is too short – should be 8 chars minimum.’) .matches(/[a-zA-Z]/, ‘Password can only contain Latin letters.’) Note how you still … Read more
const validationSchema = Yup.object().shape({ username: Yup.string() .test(‘checkDuplUsername’, ‘same name exists’, function (value) { return new Promise((resolve, reject) => { kn.http({ url: `/v1/users/${value}`, method: ‘head’, }).then(() => { // exists resolve(false) }).catch(() => { // note exists resolve(true) }) }) }) }) Yup provides asynchronous processing through the test method. (kn is my ajax promise function) … Read more
I solved it using compact() (filtering out falsely values) together with setTimeout after the FieldArray modifier function: const validationSchema = Yup.object().shape({ subject: Yup.string().required(i18n.t(‘required-field’)), description: Yup.string(), daysOfWeek: Yup.array() .of( Yup.object().shape({ dayOfWeek: Yup.string(), checked: Yup.boolean(), }) ) .compact((v) => !v.checked) .required(i18n.t(‘required-field’)), taskSchedules: Yup.array(), }); And in form: <Checkbox value={day.dayOfWeek} checked={day.checked} onChange={(e) => { replace(idx, { …day, checked: … Read more
Update to Dani Vijay’s answer. This uses useField and useFormikContext from Formik v2, to simplify usage of the component. DatePicker.jsx: import React from “react”; import { useField, useFormikContext } from “formik”; import DatePicker from “react-datepicker”; export const DatePickerField = ({ …props }) => { const { setFieldValue } = useFormikContext(); const [field] = useField(props); return … Read more
Formik author here… setError was deprecated in v0.8.0 and renamed to setStatus. You can use setErrors(errors) or setStatus(whateverYouWant) in your handleSubmit function to get the behavior you want here like so: handleSubmit = async (values, { setErrors, resetForm }) => { try { // attempt API call } catch(e) { setErrors(transformMyApiErrors(e)) // or setStatus(transformMyApiErrors(e)) } … Read more