midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve error handling for required fields in Form component

This commit is contained in:
faisolavolut 2025-02-27 14:23:58 +07:00
parent e614c4b82c
commit af41495643
1 changed files with 69 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
components/form/Form.tsx
View File

@ -76,79 +76,85 @@ export const Form: React.FC<any> = ({
console.error("Error processing date fields:", ex); console.error("Error processing date fields:", ex);
} }
const fieldRequired = Object.values(fieldDate).filter( if (mode !== "view") {
(field: any) => field?.required || field?.type === "table" const fieldRequired = Object.values(fieldDate).filter(
); (field: any) => field?.required || field?.type === "table"
);
if (fieldRequired.length) { if (fieldRequired.length) {
fieldRequired.forEach((e: any) => { fieldRequired.forEach((e: any) => {
let keys = e?.name; let keys = e?.name;
const type = e?.type; const type = e?.type;
if (type === "table" && e?.fields?.length) { if (type === "table" && e?.fields?.length) {
e.fields.forEach((item: any, index: number) => { e.fields.forEach((item: any, index: number) => {
let errorChilds: Record<string, string> = {}; let errorChilds: Record<string, string> = {};
const fieldRequired = Object.values(item?.fields).filter( const fieldRequired = Object.values(item?.fields).filter(
(field: any) => field?.required (field: any) => field?.required
); );
console.log({ fieldRequired }); console.log({ fieldRequired });
fieldRequired.forEach((subField: any) => { fieldRequired.forEach((subField: any) => {
let keySub = subField?.name; let keySub = subField?.name;
const typeSub = subField?.type; const typeSub = subField?.type;
const val = get(local.data, `${keys}[${index}].${keySub}`); const val = get(local.data, `${keys}[${index}].${keySub}`);
if (["dropdown-async", "multi-async"].includes(typeSub)) { if (["dropdown-async", "multi-async"].includes(typeSub)) {
keySub = subField?.target || subField?.name; keySub = subField?.target || subField?.name;
} }
if ( if (
[ [
"multi-dropdown", "multi-dropdown",
"checkbox", "checkbox",
"multi-upload", "multi-upload",
"multi-async", "multi-async",
].includes(typeSub) ].includes(typeSub)
) { ) {
if (!Array.isArray(get(local.data, keys)) || !val?.length) { if (
!Array.isArray(get(local.data, keys)) ||
!val?.length
) {
errorChilds[subField.name] =
"This field requires at least one item.";
isError = true;
}
} else if (!val) {
errorChilds[subField.name] = errorChilds[subField.name] =
"This field requires at least one item."; "Please fill out this field.";
isError = true; isError = true;
} }
} else if (!val) {
errorChilds[subField.name] = "Please fill out this field."; console.log({
keySub,
data: get(local.data, `${keys}[${index}]`),
val,
});
});
item.error = errorChilds;
});
} else {
if (["dropdown-async", "multi-async"].includes(type)) {
keys = e?.target || e?.name;
}
const val = get(local.data, keys);
if (
[
"multi-dropdown",
"checkbox",
"multi-upload",
"multi-async",
].includes(type)
) {
if (!Array.isArray(val) || !val?.length) {
error[e.name] = "This field requires at least one item.";
isError = true; isError = true;
} }
} else if (!val) {
console.log({ error[e.name] = "Please fill out this field.";
keySub,
data: get(local.data, `${keys}[${index}]`),
val,
});
});
item.error = errorChilds;
});
} else {
if (["dropdown-async", "multi-async"].includes(type)) {
keys = e?.target || e?.name;
}
const val = get(local.data, keys);
if (
[
"multi-dropdown",
"checkbox",
"multi-upload",
"multi-async",
].includes(type)
) {
if (!Array.isArray(val) || !val?.length) {
error[e.name] = "This field requires at least one item.";
isError = true; isError = true;
} }
} else if (!val) {
error[e.name] = "Please fill out this field.";
isError = true;
} }
} });
}); }
} }
local.error = error; local.error = error;