BaseFormFieldCreator

A component for form field creation via openAPI standard

Props

Prop name	Description	Type	Values	Default
fieldKey	a key to uniquely identify the field	number|string	-
field	field information as provided in openAPI standard	object	-
modelValue	the field value	object|string|array|date|number|boolean|null	-
fieldProps	add properties any input field can take and set values - find the possible variables at the respective input components: BaseInput BaseAutocompleteInput BaseMultilineTextInput BaseChipsInput BaseChipsBelow BaseDateInput BaseToggle Caveat: this means several input field properties are settable via separate props as well as via fieldProps (e.g. language, required, sortText) the logic here is the following: separate props will have priority over fieldProps values unless the separate prop has a default value other than ones evaluating to false (boolean false, empty string). Field props that are set via x-attrs (e.g. allowUnknownEntries) in the OpenAPI definition have priority over fieldProps set values. Fields for which a unified appearance makes sense (e.g. clearable, showErrorIcon) or that are modified internally (e.g. input, selectedList) might not be settable via fieldProps.	object	-	{}
label	a label for the field	string	-	''
showLabel	define if field label should be shown	boolean	-	true
placeholder	a placeholder for the field per default the placeholder attribute in OpenAPI x-attrs field will be used (no need to specify that)	string|object	-	''
dropDownList	provide an options list for autocomplete, chips or chips-below fields for field type group provide a nested object with field names as properties and an array for each field to ensure the correct options are assigned even if field names within different groups are identical	array|object	-	() => []
secondaryDropdown	provide a second options list (needed e.g. for texts field (text type) or contributors field (roles)	array	-	[]
autocompleteLoading	possibility to steer field loading (chips, autocomplete) from outside	boolean	-	false
language	set the current language	string	-	'en'
availableLocales	provide available locales	array	-	[]
sortText	set a sorting text	string	-	'Sort A - Z'
fieldGroupParams	pass down all necessary options for potential subform. see BaseForm props	object	-	{}
required	mark as required field Caveat: currently the required prop is only used to trigger BaseChipsBelow validation - for all other form fields it is only used for the aria-required attributes Note: if required is also set via OpenAPI definition x-attrs (provided by prop field) this will overwrite the prop! value can be an object if field_type date has several values	boolean|object	-	false
disabled	set true if input field should be disabled for an example see BaseInput value can be an object if field_type date has several values	boolean|object	-	false
invalid	mark the form field as invalid and ideally also provide an error message to display below the form field. for an example see BaseInput value can be an object if field_type date has several values	boolean|object	-	false
errorMessage	add an error message to be displayed below form field if field is invalid. for an example see BaseInput for field_type 'group' an Object with the fields can be passed on or value can be an object if field_type date has several values	string|object	-	''
validationTexts	define validation texts to be displayed below form field if input is invalid. for an example see BaseInput	object	-	{ text: { min: 'Value must be greater than or equal to {value}.', max: 'Value must be less than or equal to {value}.', minLength: 'Text must be at least {value} character(s) long.', maxLength: 'Text cannot be longer than {value} characters.', }, chips: { required: 'Select an option.', } }
showErrorIcon	define if error icon should be shown. for an example see BaseInput	boolean	-	true
clearable	if true a remove icon will be shown allowing to remove all input at once. for an example see BaseInput	boolean	-	true
identifierPropertyName	specify the object property that should be used as identifier	string	-	'source'
labelPropertyName	specify the object property that should be used as value to be displayed	string	-	'label'
assistiveText	this prop gives the option to add assistive text for screen readers properties: Options for all input types (except boolean): clearInput: text read for remove input icon if prop clearable is set true Options for inputs type autocomplete, chips, chips-below: loaderActive: text that is announced when options are being fetched (prop isLoading is set true) Options for inputs type chips: optionToRemoveSelected: text read when option is marked active for removal (by using backspace in empty input field). string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) Options for inputs type chips, chips-below: resultsRetrieved: text that is announced when results were retrieved (drop down list changed) optionAdded: text read when option was added to the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName]) optionRemoved: text read when option was removed from the selected list. string {label} could be added to be replaced by the actual chip label (value in [labelPropertyName])	object	-	{ loaderActive: 'loading.', clearInput: 'Clear input', resultsRetrieved: '{number} options in drop down.', optionAdded: 'option {label} added to selected list.', optionToRemoveSelected: 'option {label} from selected list marked for removal. Press delete or backspace to remove.', optionRemoved: 'option {label} removed.' }

Events

Event name	Properties	Description
fetch-autocomplete	value string - the string to autocomplete name string - the name of the field source string - the url to request the data from equivalent ?string - string specified for related fields e.g. for contributor roles equivalent is 'contributor' parentFields ?string[] - in case the autocomplete event originates from a subform the subform id's (field property names) are specififed in this array (most nested property last)	Event emitted for text input on autocomplete fields (field types autocomplete, chips, chips-below)
input-complete	undefined string, number, Object, Array - the updated value	event emitted once an input was completed (e.g. an option selected in chips input or an enter key triggered in BaseInput or after a date was validated)
update:model-value	undefined Object, Array, String, Number - the changed field value	Event emitted when field value changed internally

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 - the name of the current field for identification purposes 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 - the name of the current field for identification purposes 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 - the name of the current field for identification purposes 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 - the name of the current field for identification purposes index number - in case field is repeatable the index of the field
input-field-addition-after	for adding elements after input	field-name string - the name of the current field for identification purposes 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 - the name of the current field for identification purposes 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 - the name of the current field for identification purposes index number - in case field is repeatable the index of the field
drop-down-entry	customize the form field drop down options	field-name string - the name of the current field for identification purposes option object - the option object
default	use a custom icon instead of standard remove icon

---

With the FormFieldCreator component you can create any of the following form input fields with a openAPI specification:

• Plain Text (type String or Number)
• Autocomplete
• Multiline Text Input (=Textarea) - with or without language tabs
• Chips Input
• Chips Input with selected Items below
• Date Input
• BaseToggle - a boolean value field
• Nested Field Groups (a subform)

For description of the x-attrs the field creation relies on, please see 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.

Demo

Example for a MultilineTextInput:

Example for a chips input:

Example for a field group: