Form Field Renderer

<sw-form-field-renderer>

ready
Dynamically renders components with a given configuration. The rendered component can be forced by defining the config.componentName porperty. If not set the form-field-renderer will guess a suitable component for the type. Everything inside the config prop will be passed to the rendered child prop as properties. Also all additional props will be passed to the child.

Usage

{# Datepicker #}
<sw-form-field-renderer
        type="datetime"
        v-model="yourValue">
</sw-form-field-renderer>

{# Text field #}
<sw-form-field-renderer
        type="string"
        v-model="yourValue">
</sw-form-field-renderer>

{# sw-number-field #}
<sw-form-field-renderer
        :config="{
            componentName: 'sw-field',
            type: 'number',
            numberType: 'float'
        }"
        v-model="yourValue">
</sw-form-field-renderer>

{# sw-select - multi #}
<sw-form-field-renderer
        :config="{
            componentName: 'sw-multi-select',
            label: {
                'en-GB': 'Multi Select'
            },
            multi: true,
            options: [
                { value: 'option1', label: { 'en-GB': 'One' } },
                { value: 'option2', label: 'Two' },
                { value: 'option3', label: { 'en-GB': 'Three', 'de-DE': 'Drei' } }
            ]
        }"
        v-model="yourValue">
</sw-form-field-renderer>

{# sw-select - single #}
<sw-form-field-renderer
        :componentName: 'sw-single-select',
        :config="{
            label: 'Single Select',
            options: [
                { value: 'option1', label: { 'en-GB': 'One' } },
                { value: 'option2', label: 'Two' },
                { value: 'option3', label: { 'en-GB': 'Three', 'de-DE': 'Drei' } }
            ]
        }"
        v-model="yourValue">
</sw-form-field-renderer>

Component properties

Property name Type Default
type String
config Object
value

Methods

Method name Parameters
getTranslations componentName config translatableFields
getComponentFromType No parameters
addSwSelectStores bind
addSwSelectAssociationStore bind override
refreshSwSelectSelections No parameters

Imports

  • src/core/data/LocalStore
  • ./sw-form-field-renderer.html.twig
  • ./sw-form-field-renderer.scss

Watcher

  • currentValue
  • value

Mixins

  • sw-inline-snippet

Twig blocks

  • sw_form_field_renderer_inner_slot
  • sw_form_field_renderer_inner
  • sw_form_field_renderer

Slots

  • default