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

【问题标题】：How to validate the two field in one object using react hook with yup如何使用带有yup的react hook验证一个对象中的两个字段
【发布时间】：2021-06-18 17:25:02
【问题描述】：

{
        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 它也会提交。

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

【问题讨论】：

嗯，首先，你不要关闭第一行的字符串，所以几乎整个对象都是无效的。
@samuei 已更新。

标签： javascript reactjs typescript yup react-hook-form

【解决方案1】：

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

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

【讨论】：

select元素上的错误信息会如何出现？
您可以从表单上下文中获取错误并显示出来。
我试图控制错误，但它只显示room: { message: "room must be a `array` type, but the final value was: `null` (cast from the value `""`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`"}
如何显示两个select类型？
我认为这是因为房间的初始值，应该将其更改为[]而不是""