Как в symfony 4 разбить большую форму на вкладки?

Question

[Александр Владимирович]

Привет!
Есть форма form со множеством полей, которые по смыслу требуется распределить по вкладкам:

General | Security | Details | SEO | Additional

Как это можно сделать в Symfony 4?

Comments

[BoShurik]

Используете Symfony Forms?

[Александр Владимирович]

BoShurik, я делаю через это https://symfony.com/doc/current/forms.html

Answer 1

[voronkovich]

Нужно просто вручную вывести поля формы в коде вкладок в шаблоне (How to Control the Rendering of a Form). Если это админка, и вы используете bootstrap, можете использовать табы: https://getbootstrap.com/docs/4.0/components/navs/#tabs.
Основная проблема при использовании вкладок заключается в том, что вам нужно, чтобы после отправки формы текущая вкладка осталась открытой. Поэтому, нужно сохранять идентификатор текущей вкладки в хранилище браузера. Пример можете найти здесь: How to keep the current tab active on page reload ....

Примерно так это может выглядеть:

{% extends 'base.html.twig' %}

{% block body %}
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" href="#general-tab" data-toggle="tab" role="tab" aria-selected="true">
            General
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#security-tab" data-toggle="tab" role="tab" aria-selected="false">
            Security
        </a>
    </li>
</ul>
<div class="tab-content">
    {{ form_start(form) }}
    {{ form_errors(form) }}
    <div class="tab-pane active show" id="general-tab" role="tabpanel" aria-labelledby="general-tab">
        {{ form_row(form.field1) }}
        {{ form_row(form.field2) }}
    </div>
    <div class="tab-pane" id="security-tab" role="tabpanel" aria-labelledby="security-tab">
        {{ form_row(form.field3) }}
        {{ form_row(form.field4) }}
    </div>
    <button type="submit">Submit</button>
    {{ form_end(form) }}
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script charset="utf-8">
$(function() {
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });

    var activeTab = localStorage.getItem('activeTab');

    if (activeTab) {
        $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
    }
});
</script>
{% endblock javascripts %}

{% block stylesheets %}
{{ parent() }}
<style type="text/css" media="screen">
.tab-pane:not(.show) {
    display: none;
}
.tab-pane.show {
    display: block;
}
</style>
{% endblock  %}