lundi 21 août 2023

Multiple Checkbox Form Field Kendo React

I have a basic kendo react form, in which one of the field element contains multiple checkboxes. I want to be able to select whichever checkbox i want and get the values in the form of an array in the Field element in submit handler of the kendo form. Currently im able to get only the text() field values .

Custom CheckBox component (<CustomCheckboxInput/>)

 {checkboxList?.map((checkbox, key) => (
                    <span>
                        <Checkbox
                            id={checkbox.id}
                            name="role"
                            label={checkbox.label}
                            checked={checkbox.isChecked || isSuperAdmin}
                            disabled={
                                isSuperAdmin && checkbox.id !== 'superAdmin'
                            }
                            value={checkbox.label}
                            onChange={(e) =>
                                handleRoleChange(e, checkbox.id, key)
                            }
                        />
                    </span>
                ))}

Form Field for Checkbox component

                       <Field
                            id={'role'}
                            label={'Select Role(s)'}
                            value={selectedRoles}
                            defaultValue={selectedRoles.join(',')}
                            component={(props) => (
                                <CustomCheckboxInput
                                    fieldRenderProps={props}
                                    handleRoleChange={handleRoleChange}
                                    isSuperAdmin={isSuperAdmin}
                                    checkboxList={checkboxList}
                                />
                            )}
                            validator={roleValidator}
                        />

This Field element is one of the Field element inside the <FormElement/>, along with other field element which contains Input elements. Im able to get the values of the input field but not the checkbox element.




Aucun commentaire:

Enregistrer un commentaire