2016-01-13 4 views
9

У меня есть код ниже:Как добавить класс в div-группу формы ActiveField в YII2?

<?= 
    $form->field($model, 'phone_no')->textInput(
    [ 
     'placeholder' => 
     '(Conditionally validated based on checkbox above, groovy!)' 
    ] 
) 
?> 

что приводит к HTML:

<div class="form-group field-contactform-phone_no"> 
    <label class="control-label">Phone No 
    <input type="text" aria-describedby="hint-contactform-phone_no" placeholder="(Conditionally validated based on checkbox above, groovy!)" name="ContactForm[phone_no]" id="contactform-phone_no" class=""></label> 
    <small class="error-box"></small> 
    <p class="help-text" id="hint-contactform-phone_no"></p> 
</div> 

Мой вопрос:

Как я могу добавить класс 'невидимый' для внешнего DIV (содержащего class = form-group в настоящее время)?

Спасибо за помощь

ответ

15

Вы можете сделать это, как это для одного поля:

<?= $form->field($model, 'phone_no', ['options' => ['class' => 'form-group invisible']) 
    ->textInput(['placeholder' => '(Conditionally validated based on checkbox above, groovy!)']) ?> 

глобально (для всех полей в форме), это можно так:

<?php $form = ActiveForm::begin([ 
    'fieldConfig' => ['options' => ['class' => 'form-group invisible']], 
]); ?> 

Вы можете также построить fieldConfig условно:

<?php $form = ActiveForm::begin([ 
    'fieldConfig' => function ($model, $attribute) { 
     if (...) { 
      return ['options' => ['class' => 'form-group invisible']], 
     } 
    }, 
]); ?> 

Обратите внимание, что вы должны включить класс form-group, так как он не объединен с вашим обычным.

Официальные документы:

+0

Спасибо, что работает очень хорошо! Теперь как сделать fadeIn с jQuery (т.е. удалить элемент 'hide', но сделать элемент fadeIn). Будем искать его, спасибо за помощь arogachev – gvanto

6

Определить макет шаблона для всех входных элементов.

<?php 
       $form = ActiveForm::begin([ 
          'id' => 'purchase-sms-temp-form', 
          'layout' => 'horizontal', 
          'fieldConfig' => [ 
           'template' => " <div class=\"form-group form-md-line-input\">{label}\n{beginWrapper}\n{input}<div class=\"form-control-focus\"> </div>\n{error}\n</div>{endWrapper}", 
           'horizontalCssClasses' => [ 
            'label' => 'col-md-2 control-label', 
            'offset' => 'col-sm-offset-4', 
            'wrapper' => 'col-sm-10', 
            'error' => 'has-error', 
            'hint' => 'help-block', 
           ], 
          ], 
       ]); 
       ?> 

       <div class="form-body"> 
        <?= $form->field($model, 'mobile') ?> 
        <?= $form->field($model, 'volume') ?> 
        <?= $form->field($model, 'hospital_id') ?> 
        <?= $form->field($model, 'created_date') ?> 
        <?= $form->field($model, 'complete') ?> 
        <?= $form->field($model, 'modified_date') ?> 

       </div> 

Для пользовательского поля можно определить класс по

$form->field($model, 'phone_no', [ 
      'options' => [ 
      'class' => 'form-group invisible' 
      ])->textInput([ 
       'placeholder' => '(Conditionally validated based on checkbox above, groovy!)']) ?> 
+0

Зачем определять шаблон для добавления класса в контейнер? Второй подход уже включен в мой ответ. – arogachev

+0

Отсутствует одна закрывающая скобка в пользовательском поле, ['options' => ['class' => 'form-group invisible']] –

Смежные вопросы