YupSchema. 如何在YupSchema中仅验证数组的第一个元素？

Question

我有这个架构：

const YupSchema = (t: TFunction) =>
Yup.object().shape({
    name: Yup.string()
        .required('*')
        .max(49, 'maxСharacters' + ' 50'),
    areas: Yup.array().required('*'),        
    activities: Yup.array().of(
        Yup.object().shape({
            id: Yup.string().required('*'),
            pictureGood: Yup.string().required(
                'Required'
            ),
            pictureBad: Yup.string().required(
                'Required'
            ),
            translations: Yup.array() /* <=== hear I need get only first element in array*/
                .of(
                    Yup.object().shape({
                        name: Yup.string().required('*'),
                        desc: Yup.string()
                            .required('*')
                            .max(999, 'maxСharacters' + ' 1000'),
                       
                        locale: Yup.string()
                            .required('*')
                            .max(999, 'maxСharacters' + ' 1000')
                    })
                )
                .required('Translations Required')
        })
    )
})

对于这个数据对象：

[{"id":"","activitiId":"1","pictureGood":[],"pictures":[],"translations":[{"generalDesc":"test","descGood":"test","descBad":"test","locale":"IT"},"generalDesc":"test","descGood":"test","descBad":"test","locale":"EN"}]}]

但我只需要验证数组中的第一个元素，而不是所有元素。就像这样：。

...

translations: Yup.array()[0]
            .of(
                Yup.object().shape({
                    name: Yup.string().required('*'),

感谢提供答案！

- Valerii Pushkar

Answer 1

我想做同样的事情，一旦我按照以下方式扩展了我的“from”对象，我就可以看到“index”属性的出现： https://github.com/DefinitelyTyped/DefinitelyTyped/issues/49512 ...但我无法获取索引。

因此，我使用了该技术（下面将完整答案复制在此处），我还扩展了从TextContext传来的“options”对象，然后扩展了“ValidateOptions”对象（我可以通过在浏览器中逐步查看索引值来看到它！）- 因此，我可以检查我在数组中的测试所处的索引（因为它循环遍历数组中的所有项）。

我在数组上运行这个yup.test()，并简单地抛弃任何不是index = 0的东西（当然是在react/javascript中的index === 0！）。

所以我的解决方案是：

interface ValidateOptionsExtended {
    options: {
        index: number;
    };
}

Yup.array().of(
    Yup.object().shape({
         outletId: yup
            .string()
            .trim()
            .nullable()
            .test('firstOutletAlwaysMandatory', 'Organisation name is required', function (item) {
                        const { from } = this as yup.TestContext & TestContextExtended;
                        const { options } = this as yup.TestContext & ValidateOptionsExtended;
                        // if not index 0 then exit we are not checking others here
                        if (options.index > 0) {
                           return true; 
                        }

                        ...check required value etc for index 0 here...

- Davemundo

Answer 2

在此代码中，您有检查数组仅第一个元素的选项。

const YupSchema = (t: TFunction) =>
  Yup.object().shape({
    name: Yup.string()
      .required('*')
      .max(49, 'maxСharacters' + ' 50'),
    areas: Yup.array().required('*'),
    activities: Yup.array().of(
      Yup.object().shape({
        id: Yup.string().required('*'),
        pictureGood: Yup.string().required('Required'),
        pictureBad: Yup.string().required('Required'),
        translations: Yup.array(
          Yup.object({
            name: Yup.string().required('*'),
            desc: Yup.string().required('*').max(999, 'maxСharacters' + ' 1000'),
            locale: Yup.string().required('*').max(999, 'maxСharacters' + ' 1000')
          })
        ).test('check-first-element', VOYAGE_ERRORS.TRACTOR_RUNWAY, function () {
          const { parent } = this;
          const firstEle = parent[0];

          if (firstEle.name === '' || firstEle.desc === '' || firstEle.locale === '') return false;

          return true;
        })
      })
    )
  })

- Rupendra Kumar Dhiman