yii2active-form

How to modify form-group div class of ActiveField in YII2


i have template like this:

<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
    <input type="text" class="form-control inputFileVisible" placeholder="Single File">
    <span class="input-group-btn">
        <button type="button" class="btn btn-fab btn-round btn-primary">
            <i class="material-icons">attach_file</i>
        </button>
    </span>
</div>

i use yii2 framework and try to configure field input file,

<?php $form = ActiveForm::begin(); ?>
<?= $form->field($model, 'file_name')->fileInput(); ?>
<div class="form-group">
    <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>

I have try to search in internet, but only can change the div class from-group like this

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

Please help me,how i can add

<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Single File">
<span class="input-group-btn">
    <button type="button" class="btn btn-fab btn-round btn-primary">
        <i class="material-icons">attach_file</i>
    </button>
</span>

into one div form-group?


Solution

  • If you don't need to use the client validation feature of active form than you don't have to use the $form->field() to generate inputs. You can use yii\helpers\Html instead of yii\widgets\ActiveForm to have better control over the generated html.

    You can have template like this:

    <?php
    
    use yii\helpers\Html;
    echo Html::beginForm(
        ['controller/action'],
        'post',
        ['enctype' => 'multipart/form-data'] //if you want to upload file with post
    ); ?>
        <div class="form-group form-file-upload form-file-multiple">
            <?= Html::activeFileInput(
                $model,
                'file_name',
                ['class' => 'inputFileHidden', 'multiple' => '']
            ); ?>
            <div class="input-group">
                <?= Html::activeTextInput(
                    $model,
                    'file_name', 
                    [
                        'class' => 'form-control inputFileVisible',
                        'placeholder' => 'Single File'
                    ]
                ); ?>
                <span class="input-group-btn">
                    <button type="button" class="btn btn-fab btn-round btn-primary">
                        <i class="material-icons">attach_file</i>
                    </button>
                </span>
            </div>
        </div>   
    <?= Html::endForm(); ?>
    

    You can use Html::error() and Html::errorSummary() for displaying errors. See Html helper documentation for more info.

    Another option is to implement own widget that would extend yii\widgets\InputWidget. You will implement the run() method and generate required html code there. Then you can use your widget for example as $form->field(...)->widget(YourWidget::class).

    InputWidget documentation.