🐛 Checkboxes in form

This commit is contained in:
Maxime Lalo 2023-04-27 17:20:16 +02:00
parent 5aeb14a38c
commit 250ad7007c
2 changed files with 22 additions and 6 deletions

View File

@ -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(
(obj, element) => ({ ...obj, [element.getAttribute("name") ?? ""]: (element as any).value }),
{},
);
const elementsValues = allChildren
.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);
}

View File

@ -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"]}>