YII2中如何修改ActiveField的form-group div class

Question

我有这样的模板：

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

我使用 yii2 框架并尝试配置字段输入文件，

<?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(); ?>

我试过在网上搜索，但只能这样更改 div class 来自组

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

请帮帮我，我该如何添加

<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表格组？

Answer 1

如果您不需要使用活动表单的客户端验证功能，则不必使用 $form->field() 生成输入。您可以使用 yii\helpers\Html 而不是 yii\widgets\ActiveForm 来更好地控制生成的 html.

你可以有这样的模板：

<?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(); ?>

您可以使用 Html::error() 和 Html::errorSummary() 来显示错误。 See Html helper documentation 获取更多信息。

另一种选择是实现自己的扩展 yii\widgets\InputWidget 的小部件。您将实施 run() 方法并在那里生成所需的 html 代码。然后你可以使用你的小部件，例如 $form->field(...)->widget(YourWidget::class).

InputWidget documentation.

Answer 2

Yii2 框架。要 modify/add 表单组类 使用字段属性："options"

$form->field($model, "username", [
  "options" => ["class" => "form-group some-custom-class"]
])->textInput(["autocomplete" => "off"])->label('<i class="icon-user"></i> USERNAME');

YII2中如何修改ActiveField的form-group div class

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

yii2

active-form