Question

我正在尝试根据用户选择的选择选项有条件地验证对象，问题是我正在渲染货币列表，并且很难将其设置为必填字段，因为我必须通过在一个空对象开始。

我的代码栈是React，Formik和Yup（所有最新版本）。

对象架构

category: 'A',
details: {
   name: '',
   price: 0,
   stock: 0,
   currency: {
      label: '',
      code: '',
      symbol: '',
      alpha_2: '',
    }
}

Yup模式

category: Yup.string().required('You must pick a category'),
details: Yup.object().when('category', {
  is: 'A',
  then: Yup.object({
       label: Yup.string().required(`Select the currency you're retailing in`),
        code: Yup.string().required(`Select the currency you're retailing in`),
        symbol: Yup.string().required(`Select the currency you're retailing in`),
        alpha_2: Yup.string().required(`Select the currency you're retailing in`),
    }),
})

使用上述代码，表单通过了验证，货币对象具有空值''的列表，这是不希望的结果。

您如何进行模式触发器验证？

Answer 1

您未针对存储details.currency的{{1}}进行验证。在label/code/symbol/alpha_2中，schema.details应该由一个then组成，该Yup.object存储在Yup.object属性中，然后为{{1 }}。

示例：

currency

Yup嵌套架构验证

1 个答案: