Yii2, работа с формами, как написать более сложную форму?

Question

[nepster-web]

Все еще копаю yii2, вот хочу создать контактную форуму. Везде есть куча примеров:

<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'name') ?>
<?= $form->field($model, 'email') ?>
<?= $form->field($model, 'subject') ?>
<?= $form->field($model, 'body')->textArea(['rows' => 6]) ?>
<?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
'captchaAction' => '/site/default/captcha',
'options' => ['class' => 'form-control'],
'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-9">{input}</div></div>',
]) ?>
<?= Html::submitButton(Yii::t('app', 'Отправить'), ['class' => 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>

Все работает, все хорошо. Однако когда требуется это дело подстроить под верстку. Например, исходя из моей верстки, моя форма должна быть такой:

<form action="/" method="get" id="contact_form">
                                    <div class="clearfix">
                                        <div class="form-col form-marg small fl-left">
                                            <label>Name<span>*</span></label>
                                            <div class="field"><input class="form-item req" id="contact_name" name="contact_name" type="text"></div>
                                        </div>
                                        <div class="form-col small fl-left">
                                            <label>Email<span>*</span></label>
                                            <div class="field"><input class="form-item req" name="email" id="email" type="email"></div>
                                        </div>
                                    </div>
				    <div class="form-col">
                                        <label>Message<span>*</span></label>
                                        <textarea id="comment" name="comment" class="form-item req"></textarea>
                                    </div>
                                    <div class="form-btn">
                                        <div class="field"><input class="btn" name="submit" id="submit" value="send message" type="submit"></div>
                                    </div>
                                </form>

То есть если рассматривать одно поле, оно должно быть сделано так:

<div class="form-col small fl-left">
     <label>Email<span>*</span></label>
      <div class="field"><input class="form-item req" name="email" id="email" type="email"></div>
   </div>

Это дело:
<?= $form->field($model, 'email') ?>

Генерирует:

<div class="form-col form-marg small fl-left">
<div class="form-group field-contactform-email required">
<label class="control-label" for="contactform-email">E-mail адрес</label>
<input type="text" id="contactform-email" class="form-control" name="ContactForm[email]">
<div class="help-block"></div>
</div>                                       
 </div>

То есть проблема в том, что мне нужно input окутать в свой div, в label добавить свои классы, то есть можно как-то
<?= $form->field($model, 'email') ?>

разбить примерно так:

<div class="form-col small fl-left">
     мой  label с моими классами 
      <div class="field">мое текстовое поле с моими классами</div>
      <div class="error">Блок ошибок к текстовому полю</div>
   </div>

Answer 1

[Yuri Morozov]

Ох.

Ну, в общем, смотрите в сторону параметра fieldConfig (передается при создании виджета формы, вот тут <?php $form = ActiveForm::begin(); ?>), ну и там всякие options, cssOptions, template итд.

Пример:

$form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => ['class' => 'form-horizontal'],
    'fieldConfig' => [
        'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-10">{error}</div>',
        'labelOptions' => ['class' => 'col-sm-2 control-label'],
    ],
]);

Для того, чтобы понять, что куда идет, откройте файл vendor/yiisoft/yii2/widgets/ActiveForm.php, оно всё там (и неплохо документировано).

Comments

[nepster-web]

А если нужно скажем, к каждому полю свой стиль, то шаблон уже не подходит, правильно!?

[Yuri Morozov]

@nepster09 тогда уже в настройках конкретного поля прописывать.
Вообще это моя нелюбимая тема в yii2, мне всегда в доки приходится лазить по этим вопросам. Никогда не мог запомнить, в каком месте конкретные свойства прописывать. Поэтому либо использую стандартную бутстрап-разметку (стилизованную css), либо методом проб и ошибок )

[nepster-web]

=) понял, вариант! Спасибо.

Answer 2

[nepster-web]

Нашел еще вот такой пример в доках:

<?= Html::activeLabel($model, 'password') ?>
<?= Html::activePasswordInput($model, 'password') ?>
<?= Html::error($model, 'password') ?>

or

<?= Html::activeLabel($model, 'username', ['label' => 'name']) ?>
<?= Html::activeTextInput($model, 'username') ?>
<div class="hint-block">Please enter your name</div>
<?= Html::error($model, 'username') ?>

Сгенерировал свою форму:

<?php $form = ActiveForm::begin(['id' => 'contact_form']); ?>

                <div class="clearfix">
                                 
                    <div class="form-col form-marg small fl-left">
                        <?= Html::activeLabel($model, 'name') ?>
                        <div class="field"><?= Html::activeTextInput($model, 'name', ['class'=>'form-item req']) ?></div>
                        <?= Html::error($model, 'name') ?>
                    <div class="hint-block"></div>
                    </div>     
                                                               
                                                        
                    <div class="form-col form-marg small fl-left">
                        <?= Html::activeLabel($model, 'email') ?>
                        <div class="field"><?= Html::activeTextInput($model, 'email', ['class'=>'form-item req']) ?><div class="hint-block"></div></div>
                        <?= Html::error($model, 'email') ?>
                    <div class="hint-block"></div>
                    </div> 
                    
                 </div>                               
                            
                <div class="form-col">
                    <?= Html::activeLabel($model, 'body') ?>
                    <?= Html::activeTextarea($model, 'body', ['class'=>'form-item req']) ?>
                    <?= Html::error($model, 'body') ?>
                    <div class="hint-block"></div>
                </div> 
                      
                    
                <div class="clearfix">
                    <div class="form-col form-marg small fl-left">
                        <?= $form->field($model, 'verifyCode')->widget(Captcha::className(), [
                        'captchaAction' => '/site/default/captcha',
                        'options' => ['class' => 'form-item req'],
                        'template' => '<div class="row"><div class="col-lg-3">{image}</div><div class="col-lg-9"><div class="field">{input}</div></div></div>',
                        ]) ?>
                    </div>
                </div>
            
                <div class="form-btn">
                    <div class="field"><?= Html::submitButton(Yii::t('app', 'Отправить'), ['class' => 'btn btn-primary']) ?></div>
                </div>
                    
                <?php ActiveForm::end(); ?>

Все работает, кроме вот это-го блока. Тоесть yii2 js не обрабатывает вот этот блок и не показывает ошибки до отправления формы.

Comments

[nepster-web]

Skycaptain: да, но дальнейшее изучение и практика, показала, что нужно отказаться от актив форм, в пользу нативного jquery

Answer 3

[Yuri Morozov]

Кстати, вот еще занятный вариант. Сам пока не пробовал, но вдруг?..
https://github.com/yiisoft/yii2/issues/2580
См последний коммент от создателя.

Comments

[nepster-web]

Проверил, вообще жирно вышло. То что нужно все работает!

Пример:
<?php $form = ActiveForm::begin(['id' => 'contact_form']); ?>




<?php
$field = $form->field($model, 'name');
echo $field->begin();
echo Html::activeLabel($model, 'name');
echo '' . Html::activeTextInput($model, 'name', ['class'=>'form-item req']) . '';
echo '';
echo $field->end();
?>

....

[nepster-web]

тут дивы тостер покушал

Answer 4

[Сергей]

Привет всем!
Подскажите как это реализовать? При вводе данных в одно поле, то эти данные должны добавлятся в две таблицы.

Comments

[nepster-web]

это к форме не имеет отношения. Вам нужно где-то перехватить данные и дописать в другую таблицу, например в beforeSave