BaseFormGroups

Props

Prop name	Description	Type	Values	Default
formFieldJson	the json object containing all the field information incl. x-attrs custom field for placeholder, field type, etc. For more information on the attributes see BaseForm. Most importantly the x-attrs needs to include the field form_group assigning a 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 the lowest order takes precedent) to add a form group header.	object	-
modelValue	the values for each field if any already present	object	-	{}
language	set current language	string	-	'en'
availableLocales	provide information about all available languages	array	-	[]
formId	an id for field groups to still have unique field ids	string	-	''
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
errorMessagesObject	provide all error messages for fields in a separate object same structure as modelValue, final value should be an array of messages example - error in repeatable field group, only the second group has an error: { [fieldGroupName]: [{}, { amount: ['This field is required.'] }]} caveat: if error messages are provided via errorMessagesObject, they take priority over fieldProps set values	object	-	{}
clearable	if true a remove icon will be shown allowing to remove all 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	-	{}

Events

Event name	Properties	Description
fetch-autocomplete
input-complete
update:model-value
form-mounted

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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field
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) index number - in case field is repeatable the index of the field

---

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.

Below is a basic example (the form input fields are not fully functional) to demonstrate the layout.