I'm using some plugins (yii\widgets\MaskedInput)in dynamic-form, I notice that plugin work only at first element, when adding an option but this normal load but the entry "score" does not validate the entry of only numbers but allows you to enter text as a normal entry. Please advice. Thanks before.
My code like this.
_Form
<?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(); ?>
Here you can see the problem.
You need to bind the MaskedInput plugin to the newly created input using javascript. You can use the afterInsert event of the wbraganca/yii2-dynamicform wrapping the call to the .inputmask() jquery plugin that the extension is based on.
on the top of your view add the following and it will start working for every newly added row
$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);