reactjs - Formik - 如何使用 Yup 验证访问数组内的错误消息？

Question

我正在使用 Formik 和 Yup 构建一个带有验证的表单，在缺少的字段上发送特定的错误消息。其中一个字段（问题）是对象数组，我找不到访问每个单独错误消息的方法。

我创建了一个validationSchema，但是当我尝试在Formik 错误道具上传递数组索引时，我得到一个错误。

这是一个对整个表单进行抽象的沙箱。在此示例中，它仅在我注释第二个标签字段时才有效，但在正常情况下，这必须是动态的：

https://codesandbox.io/s/0ov0vxmom0?fontsize=14

我发现这是因为在呈现表单时，错误对象默认为空。因此，如果我通过第一个索引 [0]，当对象出错时，Formik 能够访问它。例如，如果我在下一个字段上得到错误，Formik 将尝试访问索引 [1] 上的错误，但错误对象将只有索引 [0]。我必须准确地传递错误位置，因为我的表单可能有多个问题。有小费吗？

标签： reactjsformikyup

Answer 1

如果您基于对象类型进行检查，您可以.typeError(msg)在每个模式的末尾添加。

前任。

 Yub.object().typeError('Invalid Object');
 Yub.array().typeError('Invalid Array');