如何让Yup条件验证在Reactjs中使用Formik

Question

我有一个Formik表单，它有两个单选按钮，要求用户选择他是工作人员还是学生，根据他的选择，我将能够显示不同的字段，供用户使用Yup验证填写。我不知道如何在这里使用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应该是一个字符串，它可以取两个值之一"；工作人员"；或"；学生；取决于所选的收音机。在您的案例中，jobType是根据布尔值true进行检查的，这是错误的。这应该对照两个字符串中的任何一个进行检查；学生；或"；工作人员"；。

您应该将验证模式更改为以下内容：

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"/>
</>
}

你也可以在我的沙箱在这里。