是的:对象数组的深度验证

ole*_*ank 11 yup formik

我有一个这样的数据结构:

{
  "subject": "Ah yeah",
  "description": "Jeg siger...",
  "daysOfWeek": [
    {
      "dayOfWeek": "MONDAY",
      "checked": false
    },
    {
      "dayOfWeek": "TUESDAY",
      "checked": false
    },
    {
      "dayOfWeek": "WEDNESDAY",
      "checked": true
    },
    {
      "dayOfWeek": "THURSDAY",
      "checked": false
    },
    {
      "dayOfWeek": "FRIDAY",
      "checked": false
    },
    {
      "dayOfWeek": "SATURDAY",
      "checked": true
    },
    {
      "dayOfWeek": "SUNDAY",
      "checked": true
    }
  ],
  "uuid": "da8f56a2-625f-400d-800d-c975bead0cff",
  "taskSchedules": [],
  "isInitial": false,
  "hasChanged": false
}
Run Code Online (Sandbox Code Playgroud)

daysOfWeek我想确保至少有一个项目有checked: true.

到目前为止,这是我的验证模式(但不起作用):

const taskValidationSchema = Yup.object().shape({
  subject: Yup.string().required('Required'),
  description: Yup.string(),
  daysOfWeek: Yup.array()
    .of(
      Yup.object().shape({
        dayOfWeek: Yup.string(),
        checked: Yup.boolean(),
      })
    )
    .required('Required'),
  taskSchedules: Yup.array(),
})
Run Code Online (Sandbox Code Playgroud)

是否可以验证daysOfWeek确保其中至少一个具有的值checked: true

ole*_*ank 20

我使用compact()(过滤掉假值)和setTimeoutFieldArray 修饰符函数之后解决了它:

const validationSchema = Yup.object().shape({
  subject: Yup.string().required(i18n.t('required-field')),
  description: Yup.string(),
  daysOfWeek: Yup.array()
    .of(
      Yup.object().shape({
        dayOfWeek: Yup.string(),
        checked: Yup.boolean(),
      })
    )
    .compact(v => !v.checked)
    .required(i18n.t('required-field')),
  taskSchedules: Yup.array(),
})
Run Code Online (Sandbox Code Playgroud)

并在形式上:

<Checkbox
  value={day.dayOfWeek}
  checked={day.checked}

  onChange={e => {
    replace(idx, { ...day, checked: !day.checked })
    setTimeout(() => {
      validateForm()
    })
  }}
/>
Run Code Online (Sandbox Code Playgroud)


小智 13

基于@olefrank的回答。这段代码对我有用。

\n
const validationSchema = Yup.object().shape({\n  subject: Yup.string().required(i18n.t(\'required-field\')),\n  description: Yup.string(),\n  daysOfWeek: Yup.array()\n    .of(\n      Yup.object().shape({\n        dayOfWeek: Yup.string(),\n        checked: Yup.boolean(),\n      })\n    )\n    .compact((v) => !v.checked)\n    .min(1, i18n.t(\'required-field\')), // <\xe2\x80\x93 `.min(1)` instead of `.required()`\n  taskSchedules: Yup.array(),\n});\n
Run Code Online (Sandbox Code Playgroud)\n