Yii2 ActiveForm. Часть 3

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой и следующих статьях мы подробнее рассмотрим работу с виджетом Yii2 ActiveForm. В частности, мы узнаем о различных методах, позволяющих отрисовать форму и ее поля – это методы begin, field, checkbox и другие.

Итак, мы продолжаем с вами знакомство с виджетом ActiveForm и его методами, которые позволяют нам создавать необходимые формы на странице. Напомню, в предыдущей статье мы с вами воспользовались методом field, который позволяет вывести поле формы. Также дополнительно мы использовали методы для настройки поля – это метод passwordInput, который вместо поля типа text сгенерирует поле типа password для ввода пароля и метод checkbox, генерирующий чекбокс.

В итоге мы получили достаточно симпатичную форму, которая использует классы Bootstrap. Вот исходный код поля, который генерируется по умолчанию:

Как видим, поле помещено в блок с классом form-group, есть label и input с классом form-control, а также есть параграф, в который будут выводиться ошибки валидации, если таковые будут. И вот здесь возникает вопрос: а что если мы хотим изменить данную структуру? Например, захотим поменять местами label и input? Или захотим, чтобы ошибки выводились не под полем, а рядом с ним, справа? Или вовсе захотим вместо классов Bootstrap использовать свои классы? Как быть?

И вот здесь нам на помощь приходит свойство template класса yii\widgets\ActiveField. Используя это свойство, мы можем настроить каждый из этих элементов. Давайте, к примеру, создадим форму, в которой ошибки валидации будут выводиться рядом с полями, а сами поля сделаем меньшего размера. Для этого используем следующий код:

<?= $form->field($model, 'username', [
    'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>'
])?>
<?= $form->field($model, 'password', [
    'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>'
])->passwordInput() ?>

В итоге мы получим нужный вариант разметки для полей нашей формы:

Что касается чекбокса, то здесь template необходимо использовать уже не в методе field, а в методе checkbox:

<?= $form->field($model, 'rememberMe')->checkbox([
    'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>'
])?>

Также у вас может возникнуть еще один вопрос: а что если у нас большая форма с десятками полей и для всех нужен другой форма? Получается, мы должны дублировать код template для каждого из полей? На самом деле нет. Yii позволяет задать единоразово шаблон для всех полей и сделать это можно в методе begin, вот так:

<?php $form = ActiveForm::begin([
    'id' => 'test-form',
    'options' => ['class' => 'form-horizontal'],
    'fieldConfig' => [
        'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>',
    ],
]); ?>

<?= $form->field($model, 'username')?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'rememberMe')->checkbox([
    'template' => '<div class="col-md-1">{label}</div><div class="col-md-5">{input}</div><div class="col-md-6">{error}</div>'
])?>

<?php ActiveForm::end(); ?>

Если теперь обновить страницу браузера, то мы увидим все тот же результат. Все просто, не так ли? В следующей статье мы еще немного поработаем с виджетом ActiveForm. Ну а на сегодня пока все.

Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2. Быстрая разработка с современным фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Научиться

Комментарии Вконтакте: