如何在YII2中修改ActiveField的form-group div类答案

【问题标题】：How to modify form-group div class of ActiveField in YII2如何在YII2中修改ActiveField的form-group div类
【发布时间】：2020-02-24 07:10:38
【问题描述】：

我有这样的模板：

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

<?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 表单组？

【问题讨论】：

标签： yii2 active-form

【解决方案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.

【讨论】：

感谢您的回复，这可行，但现在我如何才能获得验证？
服务器端验证应该仍然可以正常工作。如果您需要客户端验证，您必须自己部分实现它。您可以使用验证器的clientValidateAttribute() 方法来获取用于字段验证的JS 代码。 See docs。如果您希望客户端验证其他字段而不是文件输入，那么您仍然可以将 ActiveForm 用于其他字段并仅将 Html 助手用于文件输入（跳过 Html::beginForm 和 Html::endForm）
我的服务器端验证不起作用，验证忽略文件扩展名规则但不使用字符串长度（最大）规则，但我可能会发布另一个关于此的问题。

【解决方案2】：

Yii2 框架。要修改/添加 form-group 类，请使用字段属性："options"

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

【讨论】：