Построение Symfony форм на Bootstrap 3: Вывод блока подсказки

Вывод подсказки довольно часто встречается в полях форм. Именно в ней мы говорим пользователю о каких-либо правилах вводимых данных. Несмотря на то, что bootstrap уже имеет класс “help-block”, компонент Symfony Form не поддерживает отрисовку таких блоков. В этой статье я покажу как я применяю блок подсказки в Symfony

А вот пример результата:

Для начала создадим форму с разметкой bootstrap. Затем добавим подсказку к полю. Есть хорошая новость - начиная с версии 2.6 Symfony уже поддерживает вывод форм с разметкой для bootstrap.

Если вы работаете с более старой версией фреймворка, то темы можно скачать отдельно.

Прежде чем начать, я считаю, что вы уже добавили стили bootstrap в свою разметку страницы. Так же вы должны иметь основные понятия по созданию и выводу форм в Symfony. Если же в каком-то из этих моментов вам не хватает знаний, то я советую прочитать следующие статьи:

Шаг 1. Создание простой формы Symfony

Для простоты примера, я создаю форму в контроллере:

 /**
 * @Route("/test/form/help", name="test_form_help")
 */
 public function sampleFormAction()
 {
    $form = $this
        ->createFormBuilder()
        ->add('task', 'text')
        ->add('dueDate', 'date')
        ->getForm()
    ;

    return $this->render('AppBundle:Test:form_help.html.twig', [
        'form' => $form->createView()
    ]);
 }

Шаг 2. Вывод формы с разметкой от bootstrap

Используем тему для горизонтальной формы bootstrap. Пример:

 // AppBundle:Test:form_help.html.twig
 {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %}

 {{ form_start(form) }}
    {{ form_widget(form) }}

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Create Task</button>
        </div>
    </div>
 {{ form_end(form) }}

Теперь вы должны увидеть форму с использованием тему от bootstrap. А значит настало время вернуться к теме статьи.

Шаг 3. Задаём текст подсказки как атрибут поля

Изменим поле task и добавим атрибут help. Пока мы добрались до пятого шага, help будет отображаться только как атрибут поля.

 //->add('task', 'text')
    ->add('task', 'text', ['attr' => ['help'  => 'Task name should be short and actionable']])

Шаг 4. Создание новой тему на базе существующей Создадим свою тему на основе bootstrap_3_horizontal_layout.html.twig. Здесь то мы и будем вносить нужные нам изменения. Создайте файл bootstrap_3_cool.html.twig в каталоге /app/Resources/views/Form/. Вставьте в него следующий код:

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

 {% block form_help -%}
    {% for attrname, attrvalue in attr %}
        {% if attrname == 'help' %}
            <span class="help-block">{{ attrvalue|raw }}</span>
        {% endif %}
    {% endfor %}
 {%- endblock form_help %}

 {% block form_errors -%}
    {{ parent() }}
    {{- block('form_help') -}}
 {%- endblock form_errors %}

Шаг 5. Используем новую тему для вывода формы

Осталось применить новую тему. Просто измените имя файла темы в шаблоне:

 // {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %}
 {% form_theme form ':Form:bootstrap_3_cool.html.twig' %}

Готово! После обновления страницы вы должны увидеть подсказку точно такую же, как и на скриншоте выше.

Как так получилось?

Давайте пробежимся по файлу bootstrap_3_cool.html.twig чтобы понять как имнно получилась такая форма.

  • Строка 1: Наследуем разметку bootstrap_3_horizontal_layout.html.twig. Таким образом мы получаем все блоки оригинальной темы, если мы их не переопределим.
  • Строки 3-9: Создаем новый блок form_help. В нём проверяем наличие атрибута help. При его наличии выводим span с классом help-block и текстом из атрибута. Именно такой способ применяется в bootstrap для вывода подсказок.
  • Строки 11-14: Переопределяем блок form_errors. Сначала выводим содержание родительского блока, а затем вызываем блок form_help, который только что создали.

Таким образом, при каждом вызове form_row, form_error выводится под form_widget. Именно в этот момент вызывается наш блок form_help и выводит подсказку в нужном формате. По следующей ссылке вы найдете полный исходный код темы bootstrap 3.

Комментарии

0
Войти
Комментариев нет.
Войдите чтобы оставлять комментарии.