基于 boolean prop 的条件字段验证

Question

仅当传递给组件的 props.isAdult 为 true 时，我才希望 favoriteAlcohol 字段为 validated/required。

Yup.object().shape({
  favoriteAlcohol: Yup.string().when(props.isAdult, {
    is: true,
    then: Yup.string().required(),
  }),
  name: Yup.string().required('Nazwa jest wymagana'),
})

我该怎么做？

以上解决方案不起作用，因为 when 将表单的“键”作为第一个参数，我传递了 prop.

一个可行的解决方案是将 prop.isAdult 映射到 isAdult 表单值字段，然后我可以将 'isAdult' 作为第一个参数传递给 when() 函数。不过，这不是最好的解决方案。

Answer 1

const favoriteAlcohol = props.isAdult ? {favoriteAlcohol: Yup.string().required()} : {}

Yup.object().shape({
  ...favoriteAlcohol,
  name: Yup.string().required('Nazwa jest wymagana'),
})

如果props.isAdult = true 那么，它将

Yup.object().shape({
  favoriteAlcohol: Yup.string().required(),
  name: Yup.string().required('Nazwa jest wymagana'),
})

否则会使

Yup.object().shape({
  name: Yup.string().required('Nazwa jest wymagana'),
})

基于 boolean prop 的条件字段验证

Conditional field validation based on boolean prop

javascript

validation

reactjs

yup

formik