如何在Yup Validation中验证包含密钥的对象

Question

这是我使用Formik的React应用程序中的一个片段。

我的初始值是

initialValues: {
country: { label: '', value: '' }
}

我的字段输入是country，这是一个Select选项，选择时其值将为

country: { label: 'India', value: 'India' }

当未选择country时，我所需的error对象应为

{ country: "Please select a country" }

当未选择国家/地区时，或者当country.value === ''时，我如何添加yup验证以获得所需的错误？

我写了一个类似的验证

country: yup.object().shape({
value: yup
.string()
.label('Country')
.required("Please select a country"),
})

这是错误的，这给出了错误对象为CCD_ 6，这不是我的要求。

我应该在这里做什么改变？

Answer 1

value: ''被认为是字符串的缺失值，因此除了.required()之外的大多数验证都会忽略它。在这种情况下，您可以：

• 设置默认的国家/地区值
• 或者删除.required()规则

Answer 2

我找到了如下答案。

country: yup
.object()
.test(
'country', 
'Please select Country', 
val => !val.value ? false : true,
)

这将检查country对象内的value键，如果为空则返回false，并且给定的错误将根据需要直接分配给country对象。

Answer 3

country: Yup.object()
.shape({
label: Yup.string().ensure().required(),
value: Yup.string().ensure().required(),
})
.required("Country cannot be empty")
.nullable()

在我的情况下，country的初始值为null，然后在触发更改时接收一个对象。