- 首页
- 其他开发
- MaskedInput 仅在第一个元素上工作 - 动态形式 wbraganca - Yii2
MaskedInput 仅在第一个元素上工作 - 动态形式 wbraganca - Yii2
[英] MaskedInput work at first element only - dynamic form wbraganca - Yii2
本文介绍了MaskedInput 仅在第一个元素上工作 - 动态形式 wbraganca - Yii2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用一些动态形式的插件 (yii\widgets\MaskedInput)，我注意到插件只在第一个元素上工作，当添加一个选项但这个正常加载但条目分数"不验证条目时仅数字，但允许您输入文本作为正常条目.请指教.先谢谢了.
我的代码是这样的.
_表格
'动态形式',启用AjaxValidation" =>真的，]);?><div class="row"><div class="col-sm-6"><?=$form->field($model, 'title')->textInput(['maxlength' => true])->input('title', ['placeholder' =>"标题评估"]) ?><div class="row"><div class="col-sm-6"><?=$form->field($model, 'date_start')->widget(DateTimePicker::className(), ['选项' =>['占位符' =>'-- 选择日期--'],'插件选项' =>['语言' =>'fr','自动关闭' =>真的，'日历周' =>真的，'daysOfWeekDisabled' =>[0, 5],'今天亮点' =>真的，'todayBtn' =>真的，]]);?>
<div class="col-sm-6"><?=$form->field($model, 'date_end')->widget(DateTimePicker::className(), ['选项' =>['占位符' =>'-- 选择日期--'],'插件选项' =>['语言' =>'fr','自动关闭' =>真的，]]);?>
<div class="row"><div class="col-sm-6"><?=$form->field($model, "type_evaluation_id")->dropDownList(ArrayHelper::map(EvalTipo::find()->all(), 'id', 'description'), ['提示' =>'--选择类型--']);?>
<div class="col-sm-3"><?=$form->field($model, 'duration')->widget(TimePicker::className(), ['插件选项' =>['showSeconds' =>真的，'showMeridian' =>错误的，'分步' =>1、'第二步' =>5、]]);?>
<div class="col-sm-3"><?=$form->field($model, 'qualification')->textInput(['placeholder' => 'Qualification']) ?>
<div class="col-sm-6"><?=$form->field($model, 'description')->textarea(['rows' => 9, 'placeholder' => '输入评估描述']) ?>
<div class="内容"><div class="box box-success box-solid"><div class="box-header with-border"><h3 class="box-title">问题评估</h3>
<div class="panel-body"><?phpDynamicFormWidget::begin(['widgetContainer' =>'dynamicform_wrapper',//必需:只有字母数字字符加_" [A-Za-z0-9_]'widgetBody' =>'.container-items',//必需:css 类选择器'widgetItem' =>'.item',//必需:css 类'限制' =>30,//最大次数，一个元素可以被克隆(默认999)'分钟' =>1,//0 或 1(默认 1)'插入按钮' =>'.add-item',//css 类'删除按钮' =>'.remove-item',//css 类'模型' =>$modelQuestion[0],'formId' =>'动态形式','formFields' =>['物品'，'puntuacion',],]);?><table class="table table-bordered table-striped"><头><tr><th>问题</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//更新操作所必需的.if( !$modelQuestions->isNewRecord ){echo Html::activeHiddenInput($modelQuestions, "[{$indexQuestion}]id");}?><?=$form->field($modelQuestion, "[{$indexQuestion}]question")->dropDownList(ArrayHelper::map(QuestType::find()->all(), 'id', 'description'), ['提示' =>'--选择问题--']);?><?=$form->field($modelQuestions, "[{$indexQuestion}]question")->label(false)->textInput(['maxlength' => true, 'placeholder' =>; '标题问题']) ?><?=$form->field($modelQuestions, "[{$indexQuestion}]score")->label(false)->widget(MaskedInput::className(), ['clientOptions' =>['别名' =>'十进制','groupSeparator' =>'.','数字' =>0,'自动组' =>真的，'removeMaskOnSubmit' =>真的，'右对齐' =>错误的，],'选项' =>['类' =>'形式控制'，'最大长度' =>真的，]])?><?=$form->field($modelQuestions, "[{$indexQuestion}]justified ")->checkbox(array('label' => '', 'labelOptions' => array('style' => 'padding:5px;'),))->label('你想要一个合理的回复吗?');?></td></td><td><?=$this->render('_form-opc', ['形式' =>$形式，'模型问题' =>$index问题，'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><?php DynamicFormWidget::end();?>
<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']) ?>
<?php ActiveForm::end();?>
在这里你可以看到问题.
问题掩码输入验证
解决方案
您需要使用 javascript 将 MaskedInput 插件绑定到新创建的输入.您可以使用 wbraganca/yii2-dynamicform 的 afterInsert 事件包装对扩展所基于的 .inputmask() jquery 插件的调用
在您的视图顶部添加以下内容，它将开始为每个新添加的行工作
$js =<<<JS$(".dynamicform_wrapper").on("afterInsert", function(e, item) {$(item).find("input[name*='[price]']").inputmask({"别名":"十进制","groupSeparator":".",数字":0，自动组":真，removeMaskOnSubmit":真，右对齐":假});});JS;$this->registerJs($js, \yii\web\View::POS_LOAD);
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.
problem Maskinput validation
解决方案
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);
这篇关于MaskedInput 仅在第一个元素上工作 - 动态形式 wbraganca - Yii2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
