如何解决如何使用反应钩子和 yup 验证一个对象中的两个字段
{
label: 'Room',name: 'room',rule: yup.array(yup.object()).required(),renderer: (data: any) => {
const { control,register,errors } = useFormContext();
return (
<div className="block w-full">
{
teacherRole && teacherRole.map((item,idx) => (
<div key={idx} className="flex pb-2 items-center">
<SelectPicker
placeholder={'TEACHER'}
data={
teacherList && teacherList.map(x => (
{ label: x.name,value: x.id }
))
}
onChange={(val) => control.setValue('room',setTeacher(val,idx))}
value={control.getValues()['selectTeacher']}
style={{ width: '100%' }}
/>
<span className="px-2 leading-8 text-2xl">-</span>
<SelectPicker
data={[
{ label: 'Admin',value: 'ROLE_ADMIN' },{ label: 'Teacher',value: 'ROLE_TEACHER' },{ label: 'Student',value: 'ROLE_STUDENT' },]}
placeholder={'Role'}
onChange={(val) => control.setValue('room',setRole(val,idx))}
value={control.getValues()['selectRole']}
style={{ width: '100%',paddingRight: '.3rem' }}
/>
</div>
))
}
</div>
)
}
}
我在这里要做的是在空的时候验证老师和房间。 因为当我尝试提交表单时,即使它的 null 也会提交。
解决方法
我不知道 teacher
和 role
的类型,所以我假设它。希望这位前任有所帮助。
Yup.array().of(
Yup.object().shape({
teacher: Yup.string().required("teacher required"),role: Yup.string()
.required("role required")
})
)
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。