通过状态挂钩使用 YUP 有条件地验证 Formik 字段？

Question

我搜索了一下，不确定是否可行。本质上，我想使用不是表单值的状态挂钩使用 YUP 验证 formik 表单。

 validationSchema={Yup.object({
          comments: Yup.string()
              .when(approvalState, {
                is: false,
                then: Yup.string().required('Comments are required when denying an approval.'),
              }),
        })}

这是表单域，它本质上是一个文本框：

这是提交按钮，它将状态值更改为 true：

<button className='buttonPrimary' type='submit' onClick={()=> setApprovalState(true)} disabled={formik.isSubmitting}>Approve</button>

这是另一个提交的按钮，将状态值更改为 false：

<button className={`buttonSecondary ${styles.marginRight}`} type='submit' onClick={()=> setApprovalState(false)} disabled={formik.isSubmitting}>Deny</button>

状态值更新正常，有什么方法可以根据某个状态根据需要有条件地验证文本框吗？

Answer 1

如果 approvalState 的值是 formik:

，您的解决方案将有效

Yup.object({
  comments: Yup.string()
               .when('approvalState', { // Change approvalState to string
                 is: false,
                 then: Yup.string().required('Comments are required when denying an approval.'),
               }),
})

或者你可以这样做：

Yup.object({
  comments: approvalState
              ? Yup.string()
              : Yup.string().required('Comments are required when denying an approval.')

})

通过状态挂钩使用 YUP 有条件地验证 Formik 字段？

Conditionally validating Formik field with YUP via a state hook?

yup

formik

react-hooks