使用Formik进行条件验证

时间:2020-01-02 21:05:41

标签: reactjs validation formik yup

仅当另一个已归档的“密码”中填充了某些值时,我才尝试将字段“ old_password”设为必填项。

在Yup中使用.when()函数时它可以工作,但是当其他字段“ password”为空时,即使“ password”为空,“ old_password”仍然会提示我所需的错误消息空的。

此外,当我实现此功能时,由于某些原因,“名称”字段验证不再起作用。

我不知道该怎么解决。

这是示例代码...

https://codesandbox.io/s/wizardly-frost-sq7fq

1 个答案:

答案 0 :(得分:0)

对于感兴趣的人,我从Github上的“ Yup”存储库页面中发现,Formik字段为空时会将字段设置为“ undefined” ...

https://github.com/jquense/yup/issues/736

所以,您必须这样做...

context.Entry(entity).State = EntityState.Unchanged;

我更新了“ Codesandbox”上的代码以反映这一点。

此外,仅当此字段被触摸时,才会显示错误消息,因此,即使您在“密码”字段中键入并且没有触摸过之前提交的“ old_password”,该消息也不会出现。因此,为了避免我也编辑了输入组件,以传递“ showErrorOnTouch”道具来控制它……

https://codesandbox.io/s/yup-conditional-validation-with-formik-sq7fq

我希望这可以在将来对某人有所帮助。