Yii2: Не могу добавить поля формы динамически в Yii2

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. Мне пришлось написать пару пользовательских расширителей и привязывающих манипуляторов. с нокаутом, вы привязываете javascript viewmodel к вашему 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-моделей. магия заключается в том, чтобы получить валидацию на стороне клиента в нокаут.