是的，数组验证 - 仅当数组长度大于 1 时才需要值

Question

我在每行中有 2 个下拉菜单，我可以动态添加和删除第一行之外的行。如果只有一行（从头开始渲染）并且它是空的并且不能够在以下情况下提交，我想提交表单：

• value1 被选中而没有 value 2

或

• 已添加新行，但未选择任何值

我正在使用是的验证。

我曾尝试使用 .test() 检查长度，但此测试总是在检查“必需”后运行。

这是我想要的：

const validationSchema = yup.object({
values:
    yup.array()
        .of(
            yup.object({
                value1: yup.string().required(), // ONLY IF ARRAY LENGTH > 1
                value2: yup.string().required()// ONLY IF VALUE1 IS SELECTED
            })
        )});

Answer 1

如果我理解正确，那么应该这样做。

const mySchema = yup.object({
  values: yup.array().of(
    yup.object({
      value1: yup
        .string()
        .test(
          "test-1",
          "error: required if array length > 1",
          (value, context) => {
            const [, values] = context.from;
            const {
              value: { values: arrayValues }
            } = values;
            // ONLY IF ARRAY LENGTH > 1
            if (arrayValues.length > 1) {
              // valid only if value is provided
              return !!value;
            }
          }
        ),
      value2: yup.string().when("value1", {
        // if value1 is provied, value2 should be provided too
        is: (value1) => !!value1,
        then: (value2) => value2.required()
      })
    })
  )
});

 // should pass
  console.log(
    mySchema.validateSync({
      values: [
        { value1: "1", value2: "2" },
        { value1: "1", value2: "2" }
      ]
    })
  );
  // ValidationError: error: required if array length > 1
  console.log(
    mySchema.validateSync({
      values: [{ value1: "1", value2: "2" }, { value2: "2" }]
    })
  );

  // ValidationError: values[1].value2 is a required field
  console.log(
    mySchema.validateSync({
      values: [{ value1: "1", value2: "2" }, { value1: "1" }]
    })
  );

这里的关键是删除.required() 并在数组满足您的自定义条件时提供您自己的检查test()。

要访问.test() 内部的父值，请使用context.from

const [parent1, parent2, ...rest] = context.from;

Live Example