如何让 Yup 条件验证与 Reactjs 中的 Formik 一起使用？

Question

我有一个 Formik 表单，它有两个单选按钮，要求用户选择他是工作人员还是学生，然后根据他的选择，我将能够显示不同的字段供用户填写使用是的验证。 我不知道如何在这里使用 when() 方法！！

这是我的Formik

<Formik
        initialValues ={{
            name: '',
            school: '',
            jobType: '',
            parentName: '',
            parentPhone: '',
            parentEmail: '',
            staffPhone:'',
            staffEmail: '',
            condition:'',
        }}
        onSubmit={async (values) => {
          await new Promise((r) => setTimeout(r, 500));
          alert(JSON.stringify(values, null, 2));
        }}
        validationSchema={validate}
   
    
    >

I am trying to use Yup validation to show the fields based on the users choice
my validation Schema

const validate = Yup.object({
    name: Yup.string()
             .max(20, "Must be 20 characters or less" )
             .required('required'),
    school: Yup.string().required('Please select your school').oneOf(schools),
    jobType: Yup.string().required("are you a student or a staff member ?!"),
    parentName: Yup.string().when('jobType', {
      is: true ,
      then: Yup.string().required('Field is required')
    }),

至于表格本身：

 <div id="my-radio-group">Job type</div>
     <ErrorMessage name="jobType" />

<div role="group" aria-labelledby="my-radio-group">
<label>
<Field type="radio" name="jobType" value="student" />
Student
</label>
<label>
<Field type="radio" name="jobType" value="staff member" />
Staff member</label>

{console.log({values})}
{/* <div>Picked: {values.jobType}</div>  */}
</div> 
    <button className="btn btn-dark mt-3" type="submit"> Register</button>

Answer 1

您只需要根据 jobType 的值对您想要的字段进行一些条件渲染。 jobType 应该是一个字符串，可以取“staff member”或“student”这两个值之一，具体取决于所选的收音机。 在您的情况下，正在根据错误的布尔值 true 检查 jobType。应根据“学生”或“员工”这两个字符串中的任何一个进行检查。

您应该将您的验证架构更改为以下内容：

   const validate = Yup.object({
    name: Yup.string()
      .max(20, "Must be 20 characters or less")
      .required("Required!"),
    school: Yup.string()
      .required("Please select your school")
      .oneOf(schools),
    jobType: Yup.string().required("Are you a student or a staff member?"),
    parentName: Yup.string().when('jobType', {
      is: "student",
      then: Yup.string().required("Field is required")
    }),
    parentEmail: Yup.string().when('jobType', {
      is: "student",
      then: Yup.string().required("Field is required")
    }),
    staffPhone: Yup.string().when('jobType', {
      is: "staff member",
      then: Yup.string().required("Field is required")
    }),
    staffEmail: Yup.string().when('jobType', {
      is: "staff member",
      then: Yup.string().required("Field is required")
    })
  })

渲染表单时，它应该依赖于 jobType 中的值，如下所示：

         {
            values.jobType === "student" 
            && 
            <>
              <label>
                Parent Name
                <Field type="text" name="parentName" placeholder="Enter name" />
              </label>
              <ErrorMessage name="parentName"/>

              <label>
                Parent Email
                <Field type="text" name="parentEmail" placeholder="Enter name" />
              </label>
              <ErrorMessage name="parentEmail"/>
            </>
          }
          {
            values.jobType === "staff member" 
            && 
            <>
              <label>
                StaffPhone
                <Field type="text" name="staffName" placeholder="Enter name" />
              </label>
              <ErrorMessage name="staffName"/>

              <label>
                StaffEmail
                <Field type="text" name="staffEmail" placeholder="Enter name" />
              </label>
              <ErrorMessage name="staffEmail"/>
            </>
          }

您也可以在我的 sandbox here.