使用 React TSX 有条件地验证可见字段

如何解决使用 React TSX 有条件地验证可见字段

我很难理解如何在条件显示的字段上编写验证。我的意思是：我有一个表单，其中 2 个复选框（'webmoney'、'bank_transfer'）webmoney 显示 3 个输入字段。 bank_transfer 显示另外 2 个复选框 payment_system_A 和 payment_system_B，它们按条件显示与每个复选框相关的字段。

我只是想出了这个解决方案，但它不起作用。我已经被难住了2天了。 :(

const validationSchema = yup.object().shape({
id: yup.number().required(),title: yup.string().required('required field'),is_default: yup.number().oneOf([0,1]),is_confirmed: yup.number().oneOf([1],t('Confirm that the payment details on this form are correct')),method_fields: yup.object().when('id',(id,validationSchema) => {
  switch (paymentMethod[id]) {     <---- here i will get webmoney or bank_transfer
    case 'webmoney: {
      return yup.object().shape({
        webmoney_account_number: yup.string().required('required field'),webmoney_purpose_of_payment: yup.string().required('required field')
      });
    }

    case 'bank_transfer': {

// These fields must be validated if payment_method_a is selected
//
      return yup.object().shape({
        payments_name: yup.string().required('required field'),payments_nickname: yup.string().required('required field'),payments_address: yup.string().required('required field'),payments_bank_account_number: yup.string().required('required field'),payments_bank_routing_number: yup.number().required('required field'),payments_bank_name: yup.string().required('required field'),//
// These fields must be validated if payment_method_b is selected
    

    international_transfers_name: yup.string().required('required field'),international_transfers_address: yup.string().required('required field'),international_transfers_account: yup.string().required('required field'),international_transfers_bank: yup.string().required('required field'),international_transfers_bank_address: yup.string().required('required field'),international_transfers_swifts: yup.string().required('required field'),international_transfers_etc: yup.string().required('required field')
          });
        }
      }
    })
  });

我很乐意为您提供更多信息，但出于安全原因我不能。

解决方法

我解决了这个问题，下面我提供结构。

const validationSchema = yup.object({
field_name: yup.number(),field_name: yup.number(),field_name: yup.string().required('Required field'),checkbox1: yup.number().oneOf([0,1]),checkbox2: yup.number().oneOf([1],t('Some text')),deep_object: yup
  .object()
  .when('condition_field1',{
    is: (value) => your_condition,then: yup.object({
      field_name: yup.string().required('Required field'),field_name: yup.string().required('Required field')
    })
  })
  .when('condition_field1',then: yup.object().when('condition_field2',{
      is: (value) => your_condition,then: yup.object({
        field_name: yup.string().required('Required field'),field_name: yup.string().required('Required field')
      }),otherwise: yup.object().when('condition_field2',{
        is: (value) => your_condition,then: yup.object({
          field_name: yup.string().required('Required field'),field_name: yup.string().required('Required field')
        })
      })
    })
  })

});