MaskedInput 仅在第一个元素工作 - 动态形式 wbraganca - Yii2

Question

我正在使用一些动态形式的插件 (yii\widgets\MaskedInput)，我注意到插件只在第一个元素上工作，当添加一个选项时但是这个正常加载但是条目 "score" 确实不验证仅输入数字但允许您输入文本作为正常输入。请指教。先谢谢了。

我的代码是这样的。

_表格

<?php
$form = ActiveForm::begin([
            'id' => 'dynamic-form',
            "enableAjaxValidation" => true,
        ]);
?>
<div class="row">
    <div class="col-sm-6">
        <?=$form->field($model, 'title')->textInput(['maxlength' => true])->input('title', ['placeholder' => "Title Evaluation"]) ?>
        <div class="row">
            <div class="col-sm-6">
                <?=
                $form->field($model, 'date_start')->widget(DateTimePicker::className(), [
                    'options' => ['placeholder' => '-- Select Date --'],
                    'pluginOptions' => [
                        'language' => 'fr',
                        'autoclose' => true,
                        'calendarWeeks' => true,
                        'daysOfWeekDisabled' => [0, 5],
                        'todayHighlight' => true,
                        'todayBtn' => true,
                    ]
                ]);
                ?>
            </div>
            <div class="col-sm-6">
                <?=
                $form->field($model, 'date_end')->widget(DateTimePicker::className(), [
                    'options' => ['placeholder' => '-- Select Date --'],
                    'pluginOptions' => [
                        'language' => 'fr',
                        'autoclose' => true,
                    ]
                ]);
                ?>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <?=
                $form->field($model, "type_evaluation_id")->dropDownList(
                        ArrayHelper::map(EvalTipo::find()->all(), 'id', 'description'), [
                    'prompt' => '-- Select Type --'
                ]);
                ?> 
            </div>
            <div class="col-sm-3">
                <?=
                $form->field($model, 'duration')->widget(TimePicker::className(), [
                    'pluginOptions' => [
                        'showSeconds' => true,
                        'showMeridian' => false,
                        'minuteStep' => 1,
                        'secondStep' => 5,
                    ]
                ]);
                ?>
            </div>
            <div class="col-sm-3">
                <?=$form->field($model, 'qualification')->textInput(['placeholder' => 'Qualification']) ?>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <?=$form->field($model, 'description')->textarea(['rows' => 9, 'placeholder' => 'Enter evaluation description']) ?>
    </div>
</div>
<div class="content">
    <div class="box box-success box-solid">
        <div class="box-header with-border">
            <h3 class="box-title">Questions Evaluation</h3>
        </div>
        <div class="panel-body">
            <?php
            DynamicFormWidget::begin([
                'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                'widgetBody' => '.container-items', // required: css class selector
                'widgetItem' => '.item', // required: css class
                'limit' => 30, // the maximum times, an element can be cloned (default 999)
                'min' => 1, // 0 or 1 (default 1)
                'insertButton' => '.add-item', // css class
                'deleteButton' => '.remove-item', // css class
                'model' => $modelQuestion[0],
                'formId' => 'dynamic-form',
                'formFields' => [
                    'item',
                    'puntuacion',
                ],
            ]);
            ?>
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Question</th>
                        <th style="width: 500px;">Options</th>
                        <th class="text-center" style="width: 90px;">
                            <button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
                        </th>
                    </tr>
                </thead>
                <tbody class="container-items">
                    <?php foreach( $modelQuestion as $indexQuestion => $modelQuestions ): ?>
                        <tr class="item">
                            <td class="vcenter">
                                <table class="table table-bordered table-striped">
                                    <td class="vcenter">1.</td>
                                    <td class="vcenter">
                                        <?php
                                        // necessary for update action.
                                        if( !$modelQuestions->isNewRecord ){
                                            echo Html::activeHiddenInput($modelQuestions, "[{$indexQuestion}]id");
                                        }
                                        ?>
                                        <?=
                                        $form->field($modelQuestion, "[{$indexQuestion}]question")->dropDownList(
                                                ArrayHelper::map(QuestType::find()->all(), 'id', 'description'), [
                                            'prompt' => '-- Select Question --'
                                        ]);
                                        ?>
                                        <?=$form->field($modelQuestions, "[{$indexQuestion}]question")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Title question']) ?>                                           <?=
                                        $form->field($modelQuestions, "[{$indexQuestion}]score")->label(false)->widget(MaskedInput::className(), [
                                            'clientOptions' => [
                                                'alias' => 'decimal',
                                                'groupSeparator' => '.',
                                                'digits' => 0,
                                                'autoGroup' => true,
                                                'removeMaskOnSubmit' => true,
                                                'rightAlign' => false,
                                            ],
                                            'options' => [
                                                'class' => 'form-control',
                                                'maxlength' => true,
                                            ]
                                        ])
                                        ?><?=$form->field($modelQuestions, "[{$indexQuestion}]justified ")->checkbox(array('label' => '', 'labelOptions' => array('style' => 'padding:5px;'),))->label('You want a response justified ?'); ?>
                                    </td>
                                </table>
                            </td>
                            <td>
                                <?=
                                $this->render('_form-opc', [
                                    'form' => $form,
                                    'modelQuestion' => $indexQuestion,
                                    'modelsOpc' => $modelsOpc[$indexQuestion],
                                ])
                                ?>
                            </td>
                            <td class="text-center vcenter" style="width: 90px; verti">
                                <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?php DynamicFormWidget::end(); ?>
        </div>
    </div>
</div>
<div class="form-group">
    <?=Html::submitButton($model->isNewRecord ? '<span class="fa fa-plus"></span> Crear' : '<span class="fa fa-edit"></span>  Modificar', ['class' => 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>

在这里你可以看到问题。

problem Maskinput validation

Answer 1

您需要使用 javascript 将 MaskedInput 插件绑定到新创建的输入。您可以使用 wbraganca/yii2-dynamicform 的 afterInsert 事件包装对扩展所基于的 .inputmask() jquery 插件的调用。

在您的视图顶部添加以下内容，它将开始为每个新添加的行工作

$js =<<< JS
    $(".dynamicform_wrapper").on("afterInsert", function(e, item) {

        $(item).find("input[name*='[price]']").inputmask({
            "alias":"decimal",
            "groupSeparator":".",
            "digits":0,
            "autoGroup":true,
            "removeMaskOnSubmit":true,
            "rightAlign":false
        });
    });
JS;
$this->registerJs($js, \yii\web\View::POS_LOAD);