Yii2 ActiveForm. Часть 3

Дата публикации: 2017-05-12

Yii2 ActiveForm

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

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

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

Yii2 ActiveForm

Как видим, поле помещено в блок с классом 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() ?>

<?= $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() ?>

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

Yii2 ActiveForm

Что касается чекбокса, то здесь 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>'
])?>

<?= $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>'

])?>

Yii2 ActiveForm

Также у вас может возникнуть еще один вопрос: а что если у нас большая форма с десятками полей и для всех нужен другой форма? Получается, мы должны дублировать код 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(); ?>

<?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 можно посмотреть в этом цикле уроков.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Узнать подробнее