React yup validation with and react-hook-form，不同类型对象的数组取决于对象属性之一

Question

我有一个表格，用户可以在其中无限制地添加（添加股东）。

股东可以是两种不同的类型（自然的/合法的）

这里是 thouse 对象的接口：

export interface shareholderNatural {
  type: 'NATURAL';
  firstName: string;
  lastName: string;
  personalCode: string;
  sharePart: number;
  politicallyExposed: boolean;
  country: string;
  position: string;
}

export interface shareholderLegal {
  type: 'LEGAL';
  companyName: string;
  companyCode: string;
  sharePart: number;
  politicallyExposed: boolean;
  country: string;
  position: string;
}

我需要验证： firstName, lastName, personalCode, sharePart 如果类型是 NATURAL companyName, companyCode, sharePart 如果类型是 NATURAL

属性类型由 select 从组件状态设置，当用户单击 opn add another sharehoilder 按钮 (useState)

我试着用 Yup.array().when( 'key', {})

 const validationSchema = Yup.object().shape({
shareholders: Yup.array().when('type', {
  is: 'NATURAL',
  then: Yup.array().of(
    Yup.object().shape({
      firstName: Yup.string().required(t('')),
      lastName: Yup.string().required(t('')),
      personalCode: Yup.string().required(t('')),
      sharePart: Yup.number().required(t('')),
    }),
  ),
  otherwise: Yup.array().of(
    Yup.object().shape({
      companyName: Yup.string().required(t('')),
      companyCode: Yup.string().required(t('')),
      sharePart: Yup.number().required(t('')),
    }),
  ),
}),

});

但在这种情况下，关键属性应该在...

之外

这里有什么帮助吗？谢谢。

Answer 1

您可以分别检查每个字段。只需将 type 替换为需要的字段：

const validationSchema = Yup.object().shape({
    shareholders: Yup.array().of(
      Yup.object().shape({
        firstName: Yup.string().when('type', {
          is: 'NATURAL',
          then: Yup.string().required(t(''))
        }),
        lastName: Yup.string().when('type', {
          is: 'NATURAL',
          then: Yup.string().required(t(''))
        }),
        personalCode: Yup.string().when('type', {
          is: 'NATURAL',
          then: Yup.string().required(t(''))
        }),
        sharePart: Yup.number().required(t('')),
        companyName: Yup.string().when('type', {
          is: 'LEGAL',
          then: Yup.string().required(t(''))
        }),
        companyCode: Yup.string().when('type', {
          is: 'LEGAL',
          then: Yup.string().required(t(''))
        }),
      })
    )
  )
};

React yup validation with and react-hook-form，不同类型对象的数组取决于对象属性之一

React yup validation with and react-hook-form, array of different type of objects depends from one of object attribute

validation

reactjs

yup