如何检查值是否已存在于对象验证数组中是的
How to check value is already exits in array of object validation Yup
嗨,我又和 Yup 和 formik 有疑问了
我需要使用 Yup 验证 Fromik 字段数组我的字段就像
[{startdate:'',endDate:'',name:''},{startdate:'',endDate:'',name:''}]
Start/EndDates是Date对象
在使用 Yup 和 formik 之前,我正在做验证以检查所选日期是否已经像这样退出
const checkDate=(selectedDate)=>{
const isExisting = datas
.filter((data) => data.startDate !== null || data.endDate !== null)
.some(
(data) =>
new Date(data.startDate).toLocaleDateString() === selectedDate ||
new Date(data.endDate).toLocaleDateString() === selectedDate,
);
if (isExisting) {
toast.error('Date already exits');
return false;
}
}
我知道这有点奇怪。你们中的一些人可能对此有更好的选择。我像这样手动进行所有表单验证,在使用 formik 之后,是的帮助了很多。
即将指出,如果用户选择了任何日期,我需要验证日期,验证所选日期是否存在于数组中。它的 formik 字段数组
我的验证模式就像
export const CheckoutSchema = Yup.object().shape({
Checkout: Yup.array()
.of(
Yup.object().shape({
name: Yup.string().required(),
startDate: Yup.date().required(),
endDate: Yup.date().required(),
}),
)
});
我检查了一些 git 页面和堆栈溢出,但我不知道它是否适用于我的情况
我遇到了类似的问题,发现链接的答案很有用,但没有解释它是如何工作的。我能够弄明白,希望这会更有帮助。
Yup.addMethod(Yup.array, "unique", function(message) {
return this.test("unique", message, function(list) {
const mapper = x => x.name;
const set = [...new Set(list.map(mapper))];
const isUnique = list.length === set.length;
if (isUnique) {
return true;
}
const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
return this.createError({
path: `[${idx}].name`,
message: message,
});
});
});
const MySchema = Yup.object().shape({
Checkout: Yup.array()
.of(
Yup.object().shape({
name: Yup.string().required("Required"),
})
)
.unique("Must be unique"),
});
编辑:这实际上会在特定字段中创建错误消息,我发现这对用户更友好。此外,这只是检查名称字段的唯一性,并假设 formik 中的字段名称是 ${index}.name
.
由于我没有测试上面的内容,这里是我的实际代码,数组中有嵌套对象。这个我已经测试并确认确实有效。
Yup.addMethod(Yup.array, "unique", function(message, path) {
return this.test("unique", message, function(list) {
const mapper = x => x.description && x.description.number;
const set = [...new Set(list.map(mapper))];
const isUnique = list.length === set.length;
if (isUnique) {
return true;
}
const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
return this.createError({
path: `tests[${idx}].description`,
message: message,
});
});
});
const TestSchema = Yup.object().shape({
tests: Yup.array()
.of(
Yup.object().shape({
description: Yup.object().required("Required"),
})
)
.unique("Test already added above"),
});
嗨,我又和 Yup 和 formik 有疑问了
我需要使用 Yup 验证 Fromik 字段数组我的字段就像
[{startdate:'',endDate:'',name:''},{startdate:'',endDate:'',name:''}]
Start/EndDates是Date对象 在使用 Yup 和 formik 之前,我正在做验证以检查所选日期是否已经像这样退出
const checkDate=(selectedDate)=>{
const isExisting = datas
.filter((data) => data.startDate !== null || data.endDate !== null)
.some(
(data) =>
new Date(data.startDate).toLocaleDateString() === selectedDate ||
new Date(data.endDate).toLocaleDateString() === selectedDate,
);
if (isExisting) {
toast.error('Date already exits');
return false;
}
}
我知道这有点奇怪。你们中的一些人可能对此有更好的选择。我像这样手动进行所有表单验证,在使用 formik 之后,是的帮助了很多。
即将指出,如果用户选择了任何日期,我需要验证日期,验证所选日期是否存在于数组中。它的 formik 字段数组 我的验证模式就像
export const CheckoutSchema = Yup.object().shape({
Checkout: Yup.array()
.of(
Yup.object().shape({
name: Yup.string().required(),
startDate: Yup.date().required(),
endDate: Yup.date().required(),
}),
)
});
我检查了一些 git 页面和堆栈溢出,但我不知道它是否适用于我的情况
我遇到了类似的问题,发现链接的答案很有用,但没有解释它是如何工作的。我能够弄明白,希望这会更有帮助。
Yup.addMethod(Yup.array, "unique", function(message) {
return this.test("unique", message, function(list) {
const mapper = x => x.name;
const set = [...new Set(list.map(mapper))];
const isUnique = list.length === set.length;
if (isUnique) {
return true;
}
const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
return this.createError({
path: `[${idx}].name`,
message: message,
});
});
});
const MySchema = Yup.object().shape({
Checkout: Yup.array()
.of(
Yup.object().shape({
name: Yup.string().required("Required"),
})
)
.unique("Must be unique"),
});
编辑:这实际上会在特定字段中创建错误消息,我发现这对用户更友好。此外,这只是检查名称字段的唯一性,并假设 formik 中的字段名称是 ${index}.name
.
由于我没有测试上面的内容,这里是我的实际代码,数组中有嵌套对象。这个我已经测试并确认确实有效。
Yup.addMethod(Yup.array, "unique", function(message, path) {
return this.test("unique", message, function(list) {
const mapper = x => x.description && x.description.number;
const set = [...new Set(list.map(mapper))];
const isUnique = list.length === set.length;
if (isUnique) {
return true;
}
const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
return this.createError({
path: `tests[${idx}].description`,
message: message,
});
});
});
const TestSchema = Yup.object().shape({
tests: Yup.array()
.of(
Yup.object().shape({
description: Yup.object().required("Required"),
})
)
.unique("Test already added above"),
});