Formik "isValid"报告为 true，即使验证架构报告错误

Question

它看起来像Formik的标志"isValid"；在某些情况下设置为true，即使表单值不应被视为有效。我在下面展示了一个正在工作的代码沙箱示例。

https://m229l.csb.app/

我为表单使用的验证模式如下：

const validationSchema = Yup.object().shape(
{
heading: Yup.string().required('Heading required.'),
image: Yup.string().when('placeholder', {
is: '',
then: Yup.string().required(
'Please either choose an image, or a placeholder.'
),
otherwise: Yup.string(),
}),
placeholder: Yup.string().when('image', {
is: '',
then: Yup.string().required(
'Please either choose an image, or a placeholder.'
),
otherwise: Yup.string(),
}),
},
[['image', 'placeholder']]
);

当输出Formik的isValid标志时，以下值为true：

{ heading: 'a', image: '', placeholder: '' }

该模式表示字段之一"；图像"；或"；占位符"；必须存在，但在上述情况下，它们不存在。然而，isValid标志是true。

当用Yup手动测试时，我得到了预期的结果：

validationSchema.validate(values).then(...).catch(...);

这可以在代码沙盒中进一步看到。我在这里错过了什么？当Formik验证价值观时，是否有更多的幕后事件发生？

Answer 1

我也面临着同样的问题，因此与formik.isValid一起，我使用了另一个属性formik.touched，并认为只有当formik.isValid = true和Object.keys(formik.touched).length > 0(至少应该触摸一些字段(时，表单才是有效，如下所示：

const isFormValid = formik.isValid && Object.keys(formik.touched).length > 0; // WITH lodash: formik.isValid && !_.isEmpty(formik.touched)
if (isFormValid) {
// NOW SUBMIT THE FORM OR DO YOUR NEXT STEP
}

Answer 2

您需要将validateOnMount添加到formik中，以便它验证初始值：

<Formik 
validateOnMount={true} 
initialValues={initialValues}
validationSchema={validationSchema} 
>
// your form
</Formik>