🐛 Checkboxes in form

src/front/Components/DesignSystem/Form/index.tsx

@@ -92,10 +92,11 @@ export default class Form extends React.Component<IProps, IState> {
 		if (this.props.onValidated) this.props.onValidated();
 
 		const allChildren = this.getAllChildrenFields(e);
-		const elementsValues = allChildren.reduce(
+		const elementsValues = allChildren
-			(obj, element) => ({ ...obj, [element.getAttribute("name") ?? ""]: (element as any).value }),
+			.filter((e) => {
-			{},
+				return e.getAttribute("type") !== "radio" && e.getAttribute("type") !== "checkbox";
-		);
+			})
+			.reduce((obj, element) => ({ ...obj, [element.getAttribute("name") ?? ""]: (element as any).value }), {});
 
 		const radioInputs = allChildren.filter((e) => e.getAttribute("type") === "radio").filter((e) => (e as any).checked);
 		const radioInputsValues = radioInputs.reduce(
@@ -103,11 +104,26 @@ export default class Form extends React.Component<IProps, IState> {
 			{},
 		);
 
+		const checkBoxesInput = allChildren.filter((e) => e.getAttribute("type") === "checkbox").filter((e) => (e as any).checked);
+		const checkBoxesValues = checkBoxesInput.reduce((obj, element) => {
+			const inputName = element.getAttribute("name") ?? "";
+			const inputValue = (element as any).value as string;
+			const newValue = (obj as any)[inputName] as string[] ?? [];
+			newValue.push(inputValue);
+			return {
+				...obj,
+				[inputName]: newValue,
+			};
+		}, {});
+
 		const allInputs = {
 			...elementsValues,
 			...radioInputsValues,
-		}
+			...checkBoxesValues,
+		};
 
+		// Deleting empty input
+		delete (allInputs as any)[""];
 		if (this.props.onSubmit) {
 			this.props.onSubmit(e, allInputs, this.onSubmitErrorApi);
 		}

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -66,7 +66,7 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 						<div className={classes["form-container"]}>
 							<div className={classes["checkbox-container"]}>
 								{this.documentsType.map((documentType) => (
-									<CheckBox toolTip="Checkbox with tooltip" option={documentType} key={documentType.value as string} />
+									<CheckBox name="documents_type" toolTip="Checkbox with tooltip" option={documentType} key={documentType.value as string} />
 								))}
 							</div>
 							<div className={classes["add-document-container"]}>