fieldarray 中只有一个属性项必须为真

Question

我正在使用 Yup 和 Formik 实现动态表单。我有一个

FieldArray

，其中包含可以添加和删除的元素。每次我添加它时，它都会添加一行，其中包含一个对象，该对象具有名字、姓氏和布尔值（如果它是默认人）。

如何严格检查列表中的一个人是否为默认人？

export const schemaPerson = () => {
  return Yup.object()
    .shape({
      persons: Yup.array()
        .of(
          Yup.object().shape({
            firstname: Yup.string()
              .required(),
            lastname: Yup.string()
              .required(),
            isDefault: Yup.boolean()
              .required()
          })),
    }).min(1, 'At least one person is required');
};

Answer 1

我相信这里的挑战是将验证错误放在哪里。让我们尝试以下。

当没有

person

实例有

isDefault === true

时： 将验证错误放在数组中的每个元素上。备选方案：针对这种情况在

.test

之后添加一个

.min

并相应地修改以下代码。

当两个或多个

person

实例具有

isDefault === true

时：将验证错误放在数组中的元素上，其中

isDefault === true

Else：没有验证错误

isDefault

.

我认为

.test

将是这里最好的选择。我从你的问题中看不到数组是如何存储的，因此有一些伪代码

numberOfSelectedPersons

.

isDefault: Yup.boolean().required()
    .test(
        "exactly-one",
        "Please select exactly one person as default",
        (checked) => {
            const numberOfSelectedPersons = 
                <your person array>.filter(person -> person.isDefault).length
            
            return checked 
                // success if this is the only selected person
                ? numberOfSelectedPersons === 1 

                // success if current person is not selected, 
                // and there are selected persons in form
                : numberOfSelectedPersons > 0 
        }
     )