如何使用反应钩子和 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")
      })
    )
  })