# BaseFormGroups
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| formFieldJson | the json object containing all the field information incl. x-attrs custom fieldfor placeholder, field type, etc. For more information on the attributes see BaseForm. Most importantly the x-attrs needs to include the field form_group assigninga number (1-based index!) to each form field by which fields are grouped. Optional: add an attribute form_group_title to any group field (the field with thelowest order takes precedent) to add a form group header. | object | - | |
| valueList | the values for each field if any already present | object | - | {} |
| language | set current language | string | - | 'en' |
| availableLocales | provide information about all available languages | array | - | [] |
| formStyle | define additional style for the form should be an object eg. { 'padding-top': 0 }.note: this applies to BaseForm not the wrapper component | object | - | {} |
| fieldsWithTabs | define fields (specify field name!) for which tabs should be shown | array | - | [] |
| fieldIsLoading | enter the field name of a field that is currently fetching autocomplete results | string | - | '' |
| dropDownLists | provide an object that contains the options list for all fields with autocomplete / chips input | object | - | {} |
| showErrorIcon | define if error icon should be shown. for an example on how it looks on an individual form field see BaseInput | boolean | - | false |
| clearable | if true a remove icon will be shown allowing to removeall input at once. for an example on how it looks on an individual form field see BaseInput | boolean | - | false |
| fieldProps | provide an object with settings and properties for each field. This takes an object with the field name as properties with the props nested. { fieldName1: { required: false, ... }, fieldName2: { ... } }.find the possible variables at the respective input components: BaseInput BaseAutocompleteInput BaseMultilineTextInput BaseChipsInput BaseChipsBelow BaseDateInput BaseToggle | object | - | {} |
# Slots
| Name | Description | Bindings |
|---|---|---|
| label-addition | Slot to allow for additional elements on the right side of the label row <div> (e.g. language tabs)) | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| pre-input-field | slot to add elements within the form field but in a row before the actual input field. For an example see BaseInput. | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| input-field-addition-before | Slot to allow for additional elements in the input field <div> (before <input>). | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| input-field-inline-before | to add elements directly inline before the input (contrary to input-field-addition-before this does not wrap. For an example see BaseInput. | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| input-field-addition-after | for adding elements after input | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| post-input-field | for adding elements at the end covering the whole height | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
| error-icon | use a custom icon instead of standard error/warning icon | |
| remove-icon | use a custom icon instead of standard remove icon | |
| below-input | below-input slot added to e.g. add drop down | field-name string - in order to use slot for only one field use a if condition with the form field name (the object property) |
# Demo
This component acts as a wrapper around BaseForm, so the form fields can be grouped into visually distinct forms without this being reflected in the field information of the OpenAPI definition by simply adding an x-attrs field form_group with an order number as value.
The events and slots (and mostly also props) of this component are identical to BaseForm.
Please note that this component should be rendered client side (important for SSR projects). So for example if you have a Nuxt project you will have to wrap the component in a
<client-only>tag.
Below is a basic example (the form input fields are not fully functional) to demonstrate the layout.