基于布尔属性的条件字段验证

时间:2020-10-26 12:57:36

标签: javascript reactjs validation formik yup

仅当传递给组件的favoriteAlcoholprops.isAdult时,我才希望验证true字段。

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()函数。不过,这不是最佳解决方案。

1 个答案:

答案 0 :(得分: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'),
})