通过状态挂钩使用 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.')

})