时间戳

首页 > 解决方案 > 基于布尔属性的条件字段验证

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

问题描述

我希望favoriteAlcohol仅在props.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()函数。不过，这不是最好的解决方案。

标签： javascriptreactjsvalidationformikyup

解决方案

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'),
})

推荐阅读