Question

父表：

<div class="container">
        <div class="row">
        <div class="col-md-9 col-sm-6 col-xs-9">
          <div class="panel panel-primary">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Kid 1 Details</h3>
            </div>

            <div class="panel-body">
                <div class="form-group">
                  <label class="col-md-2 control-label">Kid 1 Name</label>
                  <div class="col-md-10">
                    <?= $form->field($model, 'k1_name')->label(false)->textInput(['maxlength' => true,'name' => 'k[1].name']) ?>
                  </div>
                </div>
                <div class="form-group">
                   <label class="col-md-2 control-label">Gender</label>
                    <label class="radio-inline">         
                      <?php $list = ['Male' => 'Male', 'Female' => 'Female'];
                        echo $form->field($model, 'gender_k1')->label(false)->radioList($list, ['inline'=>true,'name' => 'k[1].gender']);
                      ?>
                    </label> 
                </div>
            <div class="form-group">
                  <label class="col-md-2 control-label">Age</label>
                  <div class="col-md-10">
                 <?php   echo $form->field($model, 'k1_age')->label(false)->textInput(['maxlength' => true,'placeholder'=>'Enter age...','name' => 'k[1].age']); ?>
                  </div>
            </div>
            <div class="form-group">
                  <label class="col-md-2 control-label">Relation</label>
                  <div class="col-md-10">
                 <?= $form->field($model, 'relation_k1')->label(false)->textInput(['maxlength' => true,'placeholder'=>'Relation With Primary','name' => 'k[1].relation']) ?>
                  </div>
            </div> 
            <div class="col-xs-1">
                <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
            </div>         
            </div>
          </div>
        </div>
      </div>
    </div>

克隆具有索引号更改的父字段的模板

<div class="form-group hide" id="kidsTemplate">
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-6 col-xs-9">
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<i class="icon-calendar"></i>
<h3 class="panel-title">Kid 1 Details</h3>
</div>     
<div class="panel-body">


<div class="form-group">
<label class="col-md-2 control-label">Kid 1 Name</label>
<div class="col-md-10">
<?= $form->field($model, 'k1_name')->label(false)->textInput(['maxlength' => true,'name' => 'name']) ?>
</div>
</div>


<div class="form-group">
<label class="col-md-2 control-label">Gender</label>
<label class="radio-inline">         
<?php $list = ['Male' => 'Male', 'Female' => 'Female'];
echo $form->field($model, 'gender_k1')->label(false)->radioList($list, ['inline'=>true,'name' => 'gender']);?>
</label> 
</div>


<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<?php   echo $form->field($model, 'k1_age')->label(false)->textInput(['maxlength' => true,'placeholder'=>'Enter age...','name' => 'age']); ?>
</div>
</div>


<div class="form-group">
<label class="col-md-2 control-label">Relation</label>
<div class="col-md-10">
<?= $form->field($model, 'relation_k1')->label(false)->textInput(['maxlength' => true,'placeholder'=>'Relation With Primary','name' => 'relation']) ?>
</div>
</div> 


<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>         
</div>
</div>
</div>
</div>
</div>
</div>

剧本：

<script>

$(document).ready(function() 
{
 kidsIndex = 1;

        // Add button click handler
        .on('click', '.addButton', function() 
        {
            kidsIndex++;
            var $template = $('#kidsTemplate'),
               $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .attr('data-k-index', kidsIndex)
                                .insertBefore($template);

            // Update the name attributes
            $clone
                .find('[name="name"]').attr('name', 'k[' + kidsIndex + '].name').end()
                .find('[name="gender"]').attr('name', 'k[' + kidsIndex + '].gender').end()
                .find('[name="age"]').attr('name', 'k[' + kidsIndex + '].age').end()
                .find('[name="relation"]').attr('name', 'k[' + kidsIndex + '].relation').end();

        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row  = $(this).parents('.form-group'),
                index = $row.attr('data-k-index');

            // Remove element containing the fields
            $row.remove();
        });
});
</script>

我需要添加孩子表单字段，索引号更改为小孩1,2,3 ... 我添加了按钮以在父表单中添加字段，还添加了一个按钮来删除模板中的字段。试图实现类似这样的事情 - http://formvalidation.io/examples/adding-dynamic-field/#adding-fields-with-different-names

Answer 1

为此我正在使用knockoutjs。我不得不写几个自定义扩展程序和绑定处理程序。使用knockout，您可以将javascript视图模型绑定到DOM。

HTML：

<div class='liveExample'> 

<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
    <ul data-bind="foreach: items">
      <li data-bind="text: $data"></li>
    </ul>
</form>

</div>

和JavaScript：

var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");
    this.addItem = function() {
        if (this.itemToAdd() != "") {
            this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    }.bind(this);  // Ensure that "this" is always this view model
};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));

我还为我的需求写了ActiveForm replacement，对不起，但是文档已经过时了。我在做什么是从yii模型生成knockout-view模型。神奇的是让模型的客户端验证成为淘汰赛。

Yii2：无法在Yii2中动态添加表单字段

1 个答案: