foris-js/src/form/components/ForisForm.md

<ForisForm/> is Higher-Order Component which encapsulates entire form logic and provides with children required props. This component structure provides comfort API and allows to create typical Foris module forms easily.

Example of usage of <ForisForm/>

You can pass more forms as children.

<ForisForm
    ws={ws}
    forisConfig={{
        endpoint: API_URLs.wan,
        wsModule: "wan",
    }}
    prepData={prepData}
    prepDataToSubmit={prepDataToSubmit}
    validator={validator}
>
    <WANForm />
    <WAN6Form />
    <MACForm />
</ForisForm>

Example of children forms props usage

export default function MACForm({
    formData, formErrors, setFormValue, ...props
}) {
    const macSettings = formData.mac_settings;
    const errors = (formErrors || {}).mac_settings || {};
    return (
        <>
            <h3>{_("MAC")}</h3>
            <CheckBox
                label={_("Custom MAC address")}
                checked={macSettings.custom_mac_enabled}
                helpText={HELP_TEXTS.custom_mac_enabled}

                onChange={setFormValue(
                    (value) => ({ mac_settings: { custom_mac_enabled: { $set: value } } }),
                )}

                {...props}
            />
            {macSettings.custom_mac_enabled
                ? (
                    <TextInput
                        label={_("MAC address")}
                        value={macSettings.custom_mac || ""}
                        helpText={HELP_TEXTS.custom_mac}
                        error={errors.custom_mac}
                        required

                        onChange={setFormValue(
                            (value) => ({ mac_settings: { custom_mac: { $set: value } } }),
                        )}

                        {...props}
                    />
                )
                : null}
        </>
    );
}

The passes subsequent props to the child components.

Prop	Type	Description
formData	object	Data returned from API.
formErrors	object	Errors returned after validation via validator.
setFormValue	func	Function for data update. It takes update rule as arg (see example above).
disabled	bool	Flag to disable form elements (during updates or loadings e.t.c.).