Я пытаюсь избавиться от повторяющихся макетов в twig для форм symfony2. В настоящее время мой макет выглядит примерно так:
<form name="step2" method="post" action="" class="productForm"> <h2>Step2:</h2> <div id="step2"> <div class="form-group"> <div class="form-widget"> <div id="step2_client1"> <div class="form-group"><label class="control-label required" for="step2_client1_clientTitle">Client 1 title:</label> <div class="form-widget"><select id="step2_client1_clientTitle" name="step2[client1][clientTitle]" class="form-control"> <option value="Mr">Mr</option> <option value="Mrs">Mrs</option> <option value="Miss">Miss</option> <option value="Ms">Ms</option> <option value="Dr">Dr</option> <option value="Sir">Sir</option> </select></div> </div> <div class="form-group"><label class="control-label required" for="step2_client1_firstName">Client 1 first name:</label> <div class="form-widget"><input type="text" id="step2_client1_firstName" name="step2[client1][firstName]" required="required" class="form-control"> </div> </div> <div class="form-group"><label class="control-label required" for="step2_client1_surname">Client 1 last name:</label> <div class="form-widget"><input type="text" id="step2_client1_surname" name="step2[client1][surname]" required="required" class="form-control"></div> </div> </div> </div> </div> ... <div class="form-group form-group-submit"> <div class=""><a id="step2_save" class="has-spinner btn btn-default btn-submit"><span class="spinner"><i class="fa fa-spinner fa-spin"></i></span>Complete the quote </a></div> </div> <input type="hidden" id="step2__token" name="step2[_token]" class="form-control" value="xxx"></div> </form> И у меня есть грязный скрипт js, чтобы исправить мой макет так, как я хочу, чтобы он отображался, но это, как сказано, грязно. Поэтому мне было интересно, может ли кто-нибудь помочь мне изменить свой файл в twig, чтобы показывать только классы группы форм и форм-виджета для дочерних элементов, а не для родителей.
Грязный сценарий js:
$('.form-group').each(function(e){ if($(this).parents('.form-group').length) { var $realGroup = $(this).parents('.form-group'); $realGroup.toggleClass('form-group'); $realGroup.children('.form-widget').toggleClass('form-widget'); } });
И веточка:
{% block form_row -%} {% spaceless %} <div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}"> {{ form_label(form) }} <div class="form-widget"> {{ form_widget(form) }} {{ form_errors(form) }} </div> </div> {% endspaceless %} {%- endblock form_row %}
Теперь бит ветки является стандартным форматом формы бутстрапа SF2, я уверен, что не изменил его.
Поэтому любая помощь, избавляющаяся от скрипта js и фактическое выполнение этого в twig, была бы замечательной, я пробовал несколько вещей, но каждый из них оказался хуже, чем то, что я сделал с js. Поэтому я немного застрял.
РЕДАКТИРОВАТЬ:
Что делает скрипт js, просто удаляет классы css, поэтому макет работает. Это выглядело бы плоским, потому что это было бы просто пустым div, но то, что я за этим, не показывает divs в первую очередь. Я пытаюсь изменить скрипт twig, а не css, так как это так, как мы этого хотим.
У вас есть три варианта.
1. Или создайте каждое поле вручную:
{{ form_start(form, {'action': path(''), 'attr': {'class':'productForm'}}) }} {{ form_errors(form) }} <div class="form-group"> {{ form_label(form.clientTitle, 'Client 1 title:', {'label_attr': {'class': 'control-label required'}}) }} <div class="form-widget"> {{ form_widget(form.clientTitle, { 'attr': {'class': 'form-control' }}) }} </div> {{ form_errors(form.clientTitle) }} </div> <div class="form-group"> {{ form_label(form.firstName, 'Client 1 first name:', {'label_attr': {'class': 'control-label required'}}) }} <div class="form-widget"> {{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }} </div> {{ form_errors(form.firstName) }} </div> <div class="form-group"> {{ form_label(form.firstName, 'Client 1 last name:', {'label_attr': {'class': 'control-label required'}}) }} <div class="form-widget"> {{ form_widget(form.firstName, { 'attr': {'class': 'form-control' }}) }} </div> {{ form_errors(form.firstName) }} </div> <div class="form-group form-group-submit"> <div class=""> <a id="step2_save" class="has-spinner btn btn-default btn-submit"> <span class="spinner"> <i class="fa fa-spinner fa-spin"></i> </span> Complete the quote </a> </div> </div> {{ form_end(change_password) }}
2. Или вы можете создать свою собственную тему формы .
3. Используйте для каждой формы петлю:
{% for child in form.children %} <div class="form-group"> {{ form_label(child, null, {'label_attr': {'class': 'control-label required'}}) }} <div class="form-widget"> {{ form_widget(child, { 'attr': {'class': 'form-control' }}) }} </div> {{ form_errors(child) }} </div> {% endfor %}
Все зависит от того, сколько полей будут иметь ваши будущие формы и сколько у вас подобных форм.
Однако использование JS для такой вещи – нет-нет.
Самый простой способ – создать пользовательскую тему формы.
Если вы посмотрите на текущий загрузочный файл Symfony2 , вы увидите:
{% block form_row -%} <div class="form-group{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}"> {{- form_label(form) -}} {{- form_widget(form) -}} {{- form_errors(form) -}} </div> {%- endblock form_row %}
«Компоновка» на самом деле говорит вам, если текущий элемент содержит подэлементы (форма, коллекция, … в основном все родительские элементы), и если вы не хотите иметь этот form-group для родителей, вы просто необходимо перегрузить этот блок в пользовательской теме.
{# AppBundle::custom_theme.html.twig #} {% use "bootstrap_3_layout.html.twig" %} {% block form_row -%} <div class="{% if not compound %}form-group{% endif %}{% if (not compound or force_error|default(false)) and not valid %} has-error{% endif %}"> {{- form_label(form) -}} {{- form_widget(form) -}} {{- form_errors(form) -}} </div> {%- endblock form_row %}
Если вы не хотите, чтобы div вообще, просто удалите его! Это твое дело сейчас.
Чтобы применить изменения во всем проекте, вы можете добавить это в config.yml :
twig: # ... form_themes: - 'AppBundle::custom_theme.html.twig'
Или использовать его только для определенного вида:
{% form_theme yourForm 'AppBundle::custom_theme.html.twig' %}
Примечание. yourForm – это ваш текущий объект формы.
Уже Джордж Иримичук помог вам, я хочу сказать, что вы можете использовать второй вариант, указанный в ответе Джорджа, вам нужно сосредоточиться на этой части темы формы.
Symfony2 twig создайте форму на основе выбранной темы, если вы попытаетесь добавить тему своей формы, тогда это будет хорошо, другие варианты означают, что вы просто нажимаете проблему на другое место, и это всего лишь трюк. Не нужно обновлять полную форму, просто добавьте форму form_row, она будет работать, может попробовать эту
http://symfony.com/doc/current/cookbook/form/form_customization.html#customizing-the-form-row
Я использовал это мой проект, лучше всего, что вы можете отправлять атрибуты из своего построителя форм, а затем проверять их в form_row, которые отображают ваши строки в форме и могут создавать форму, как вы хотите, как после условий проверки –
attr => array( 'parent_class' => false)
и можете проверить это в form_row как
if( form.vars.attr.parent_class is defined )
и может добавить условие в веточку.
Если у вас есть проблема, так как ваша форма имеет дочернюю форму, а twig form_row показывает это нечетным образом –
Я создаю этот проект и только это до сих пор. В том, что есть студенческая сущность, объединенная с различными объектами, поэтому во время записей формы, таких как Профиль. Я использовал оба объекта Student и Address, что я сделал, я просто проверил это
{% if ( not form.children ) or ( form.vars.expanded is defined and form.vars.expanded ) %} <div class="{{ form.vars.attr['parent-div-class'] is defined ? form.vars.attr['parent-div-class'] : 'col-sm-12'}}"> <div class="form-group"> {{ form_label(form) }} {{ form_widget(form) }} {% if form_errors(form) %} {{ form_errors(form) }} {% endif %} </div> </div> {% else %} <div class="clear-both"></div> {{ form_label(form) }} {{ form_widget(form) }} {% endif %}
код не точный, но основная концепция.
Надеюсь, вы понимаете мою мысль.