How to add class to form-group div of ActiveField in YII2?

Question

I have some code below:

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

Which results in 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>

My Question is:

How can I add a class 'invisible' to the outer div (containing class=form-group currently)?

Thanks for help

Answer 1

You can do it like this for single field:

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

Globally (for all fields in form) it's possible like this:

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

You can also build fieldConfig conditionally:

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

Note that you have to include form-group class as well, because it's not merged with your custom one.

Official docs:

• yii\widgets\ActiveField $options
• yii\widgets\ActiveForm $fieldConfig

Answer 2

Define the template layout for all the input elements.

<?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>

For a custom field you can define a class by

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