When using Yup if all normal features fail you, you can use the .test feature, documented here – https://github.com/jquense/yup#mixedtestname-string-message-string–function-test-function-schema mixed.test(name: string, message: string | function, test: function): Schema Adds a test function to the validation chain. Tests are run after any object is cast. Many types have some tests built in, but you can create … Read more
An example of a field that requires a numeric value that cannot be higher than the multiplication of two other field’s values const validationSchema = Yup.object().shape({ num1: Yup.number().positive().required(‘This field is required.’), num2: Yup.number().positive().required(‘This field is required.’), num3: Yup.number().positive().required(‘This field is required.’) .when([‘num1’, ‘num2’], (num1, num2, schema) => { return num1 > 0 && num2 > … Read more
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
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