Form rendering

sv-form

<sv-form :form="{{ form | vue }}" /></sv-form> lets you render a Symfony Form clientside. It renders a <v-form> with all fields inside.

props

• form (IForm object) - the json serialized form (including subforms) to be rendered.
• labelSubmit (string, default: 'save') - label for the submit button.
• method (string, default: 'post') - the method that should be used when submitting the form (e.g. 'get', 'put', 'post').
• you can provide additional attributes. These will be passed to <v-form>.

slots

actions
Let's you overwrite the submit-button.

<sv-form :form="{{ form | vue }}" ref="form" />
    <div slot="actions">
        <v-btn color="primary" type="submit">Submit</v-btn>
        <v-btn color="warning" type="button" @cancel="$refs.form.reset()">Cancel</v-btn>
    </div>
</sv-form>

default { children: IForm[], ...children }
Default slot that lets you provide sub-forms yourself, e.g. to change the order or make some alterations. Every subform is being passed as object with the name of that subform.

If you have a form with fields 'name', 'price' and 'description' you could use the default slot like this:

<sv-form :form="{{ form | vue }}" v-slot="{ children, name, price }">
    <v-row>
        <v-col>
            <sv-form-widget :form="name">
        </v-col>
        <v-col>
            <sv-form-widget :form="price ">
        </v-col>
    </v-row>
    <sv-form-widget v-for="(child, key) in children" :key="key" :form="child"><!-- renders the rest of this form -->
</sv-form>

subform_[name] { subform: IForm[] }
Lets you override a specific subform, which can be useful if you don't need to change the order of the form, but simply want to modify a single field:

<sv-form :form="{{ form | vue }}">
    <template v-slot:subform_name="{ subform }">
        <p>Some text before the name field.</p>
        <sv-form-widget :form="subform ">
    </template>
</sv-form>

sv-form-widget

The sv-form-widget is used inside sv-form for rendering individual fields. This components decides what component to use, which could something like a v-textarea, a v-select or any custom component that matches the block_prefix, provided in the serverside form-builder. The sv-form-widget uses recursion for subforms and checks whether a field or subform has already been rendered.

props

• form (IForm object) - the json serialized form (or subform) to be rendered.
• Any additional attribute will be passed to the selected component.

slots

The sv-form-widget cascades slots to the selected component. In case of a subform, you can use the default slot the same way as you can with the sv-form component.

sv-collection

When a collection type is used by the serverside form-builder, then the sv-form-widget will pass that (subform)data into this sv-collection component. This components then builds each collection-item as subform inside a tab. It uses the collection prototype for adding new items.

props

• collectionErrorMessage (string, default: 'There are one or more errors in this collection.')
  Message for when an error occurs inside this collection after submitting the form.
• noItemsText (string, default: 'There are no items in this collection.') - Message for when there are no items in this collection.
• verticalTabs (boolean, default: false) - by default horizontal tabs are used, but you can use vertical tabs instead, which might be useful when there are otherwise too many items in this collection.

slots

• default - Like the sv-form-widget and sv-form you can use the default slot the same way for subforms.
• tabs - lets you overwrite the part that would render the tabs.
• tab { child: IForm } - lets you overwrite a single tab.
• btn-add-text { text: string } - overrides the add text inside the button.
• btn-delete-text { text: string } - overwrites the delete text inside the button.
• no-items-text { text: string } - overwrites the text when there are no items.

Other components

Check the files in https://github.com/k3ssen/SymfonyVuetified/tree/master/Resources/assets/components/Form for an overview of components.

Basically most components provide a bridge to the desired vuetify component. For example, the sv-textarea passes data, properties and slots into the v-textarea.