javascript - 如何使用带有yup的react hook验证一个对象中的两个字段

Question

{
        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>
          )
        }
      }

我在这里要做的是验证老师和房间是空的。因为当我尝试提交表单时，即使它为空，它也会提交。

我想要的是在角色或老师为空时添加验证，应该出现错误消息。

标签： javascriptreactjstypescriptyupreact-hook-form

Answer 1

我不知道的类型，teacher所以role我假设它。希望这位前任有所帮助。

  Yup.array().of(
      Yup.object().shape({
        teacher: Yup.string().required("teacher required"),
        role: Yup.string()
          .required("role required")
      })
    )
  })