unclead/yii2-multiple-input

Yii2 widget for handle multiple inputs for an attribute of model

Yii2 Multiple input widget.

Yii2 widget for handle multiple inputs for an attribute of model and tabular input for batch of models.

Latest release

The latest stable version of the extension is v2.27.0 Follow the instruction for upgrading from previous versions

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require  unclead/yii2-multiple-input "~2.0"

or add

"unclead/yii2-multiple-input": "~2.0"

to the require section of your composer.json file.

Basic usage

For example you want to have an ability of entering several emails of user on profile page. In this case you can use yii2-multiple-input widget like in the following code

use unclead\multipleinput\MultipleInput;

...

<?php
    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
        'max'               => 6,
        'min'               => 2, // should be at least 2 rows
        'allowEmptyList'    => false,
        'enableGuessTitle'  => true,
        'addButtonPosition' => MultipleInput::POS_HEADER, // show add button in the header
    ])
    ->label(false);
?>

Documentation

You can find a full version of documentation here

License

yii2-multiple-input is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

yii2-multiple-input's Issues

Add columnClass paramter

@unclead Hello, I think it's good idea to add columnClassparameter to MultipleInput.
What do You think about it?

Ошибка при обновлении до 1.2.0

подключаю примерно так

field($model, 'subservices')->widget(\unclead\widgets\MultipleInput::className(), [ 'columns' => [ [ 'name' => 'name', 'title' => 'Доп.Услуга', 'type'=>'textInput', ], .... ]?>

имена полей раньше были что-то вроде Service[subservices][0][name], то теперь Service[0][name]. Толи бага толи фича..но у меня все сломала, откатился до 1.1.0 все норм

Баг checkBox

Снова привет, решил снова использовать твое расширение, в этот раз поле checkbox..

    'columns' => [
        [
            'name'  => 'enable_subdomain',
            'title' => 'Отображать в поддоменах?',
            'type'  => 'checkbox',
            'options'=>[
                'class'=>''
            ],
        ],
    ]

В общем проблема в том, что каждому input в строке 182 MultipleInputColumn проставляется класс form-control... что делает отображение checkbox очень странным) думаю с другими типами аналогично..лучше бы сделать так -> если class в options указан ставить его, если нет то ставить дефолтный form-control

bad pattern on regexp

In
unclead/widgets/renderers/TableRenderer.php, line 141
instead of:

$cells[0] = preg_replace('/^(<td[^>]+>)(.*)(<\/td>)$/', '${1}' . $hiddenInputs . '$2$3', $cells[0]);

we need this (with s (PCRE_DOTALL) modifier):

$cells[0] = preg_replace('/^(<td[^>]+>)(.*)(<\/td>)$/s', '${1}' . $hiddenInputs . '$2$3', $cells[0]);

for multiline search inside of 'td' tag.
Do you agree?

Remove previous plus/remove events

When I use AJAX to load a form with the multiple input element in a modal popup, the script attaches events to $(document) for the plus and minus buttons multiple times. When I click on the plus button after loading the form the second time, it adds two fields instead of just one.

Please remove the previous events.

--- jquery.multipleInput.js     2015-11-11 13:06:09.067983422 -0800
+++ jquery.multipleInput.js.new 2015-11-11 13:03:33.743983347 -0800
@@ -77,11 +77,13 @@
                 attributeDefaults: {}
             });

+            $(document).off('click.multipleInput', '#' + settings.id + ' .js-input-remove');
             $(document).on('click.multipleInput', '#' + settings.id + ' .js-input-remove', function (e) {
                 e.preventDefault();
                 methods.removeInput.apply(this);
             });

+            $(document).off('click.multipleInput', '#' + settings.id + ' .js-input-plus');
             $(document).on('click.multipleInput', '#' + settings.id + ' .js-input-plus', function (e) {
                 e.preventDefault();
                 methods.addInput.apply(this);

class is not working

why my option 'class' => 'form-control', is not being applied??

  echo \unclead\widgets\TabularInput::widget([
        'models' => $model->Tributos,
        'columns' => [
            [
                'type' => Form::INPUT_TEXT,
                'options' => ['readonly' => true, 'maxlength' => 45],
                'name' => 'Nombre',
                'title'=>'Nombre'
            ],
            [
                'name' => "BaseImponible",
                'title'=>'Base Imponible',
                'type' => \yii\widgets\MaskedInput::className(),
                'options' => [
                    'class' => 'form-control',
                    'mask' => '999-999-99-99'
                ]
            ]
        ],
    ]);

<td class="list-cell__BaseImponible"><div class="form-group field-comprobantetributo-4-baseimponible"><input type="text" id="comprobantetributo-4-baseimponible" name="ComprobanteTributo[4][BaseImponible]" data-plugin-inputmask="inputmask_892303c7"></div></td>

thanks!!

Improve documentation on validating

In docs/multiple_input_single.md there's an example of validating through separate function with foreach loop.
The same can be done with each validator that is available since yii 2.0.4:

[['email'], 'each', 'rule'=>['email']],

MultipleInput allowEmptyList

When using allowEmptyList there is one empty line for record addition.
I want that initially there were no lines, and appeared only when pressing the button to add.

Dependent Dropdown

I want to use dependent dropdown. how is it possible ?

Possibility to skip columns

When I use the MultipleInput for a single field (for example, a list of BCC email addresses), the input models are posted as MyForm[bcc][bcc][0]. Would it be possible to skip the columns and just post it as MyForm[bcc][0]? This way, you can use the default 'each' validator with an existing rule. At the moment, a custom validation method seems to be required.

Add support of clientValidation

cant figure out why yii2-multiple-input client validation does not work ? Is it not a built-in feature ?

Error in Multiple columns example

https://github.com/unclead/yii2-multiple-input/blob/master/docs/multiple_columns.md
This validation example not works

$key = $attribute . '[' . $index . '][label]';
$this->addError($key, $error);

The $error not displays.
I guess it is possible but requires impruvement within the widget code.

Не прорисовывается последняя кнопка удаления

Вот эта кнопка не прорисовывалась, пока я не изменил в TableRenderer строку 421
if ($index < $this->min || $index == $this->limit + 1) {
добавив +1 к лимиту.
Вот как я вызываю виджет:

      <?= TabularInput::widget([
                    'models' => (count($model->bookingPhones) == 0)? [new BookingPhones()]:$model->bookingPhones,
                    'limit'=>Yii::$app->params['limitBookingPhones'],
                    'min'               => 1, // should be at least 1 rows
                    'attributeOptions' => [
                        'enableAjaxValidation'      => true,
                        'enableClientValidation'    => false,
                        'validateOnChange'          => false,
                        'validateOnSubmit'          => true,
                        'validateOnBlur'            => false,
                    ],
                    'columns' => [
                        [
                            'name' => 'id',
                            'type' => \unclead\widgets\TabularColumn::TYPE_HIDDEN_INPUT
                        ],
                        [
                            'name'  => 'phone_number',
                            'type'  => \unclead\widgets\MultipleInputColumn::TYPE_TEXT_INPUT,
                            'enableError'=>true,
                        ],
                    ],
                ]) ?>

write tests

Saving multi input to related model

Hi @unclead !

I have Gallery model. And I have related to it Videos model.

I need to save Videos model from Gallery ActiveForm.

class Gallery extends ActiveRecord {

public $video;

<?= $form->field($model, 'video')->widget(MultipleInput::className(), [
    'limit' => 5
]) ?>
...

public function getVideos()
{
    return $this->hasMany(Videos::className(), ['ext_id' => 'id'])->where(['ext_type'=>'gallery']);
}
...

Video filelds to save are

$image_model = new Videos;
$image_model->url = $video;
$image_model->ext_type = 'youtube';
$image_model->ext_type = 'gallery';
$image_model->ext_id  = $this->id;
$image_model->save();

How should I save fields to Video model from Gallery model?
In action or maybe in beforeSave method?

Customization buttons

Add ability to customize css of buttons

Предложение по улучшению

Каким-то образом, добавить возможность вместо dropDownList использовать https://github.com/RomeroMsk/yii2-chosen
с этой опцией это расширение бы покрыло 99% всех задач с мульти полями..

Incorrect behavior is case when `min` is equal to `limit`

The widget renders incorrect output in case when min and limit are equal

    echo $form->field($model, 'emails')->widget(MultipleInput::className(), [
        'limit'             => 6,
        'allowEmptyList'    => false,
        'enableGuessTitle'  => true,
        'min'               => 6, 
        'addButtonPosition' => MultipleInput::POS_HEADER // show add button in the header
    ])
    ->label(false);

It must renders 6 rows, but the count of rows depends on quantity of models.
If we already have 3 emails the widget will render 3 rows, if we have 5 emails - 5 rows.

Add min option

it can be useful to have min option in some cases

yii2-multiple-input + yii2-fileapi-widget = bug

Thanks for the cool extension. I'm using yii2-fileapi-widget extension and I have an error:

I tried to fix it, but I did not succeed. Could you to advise a solution?

Add new row should not copy values of the most recent row

On create, it works fine. When you click "+" to add new row, it gives you all blank value even though you may fill in values for your first row.

On update, when you click "+" to add new row, the new row will get the value of the closest row.

The reason for that is I will have "id" field hidden on update, so when I update existing value, I check for "id" in the database and update new values (not going to delete all and re-create all because other table will use the "id" as foreign key)

{multiple-input} pattern change not enough

If I use the kartik\typeahead\TypeAhead widget with the MultipleInput widget,
the TypeAhead generates, for example, the next JS code:

var persons_title_{multiple_index}_data_1 = new Bloodhound({"datumTokenizer":Bloodhound.tokenizers.obj.whitespace('value'),"queryTokenizer":Bloodhound.tokenizers.whitespace,"remote":{"url":"/basic/web/persons/country-list?q=QUERY","wildcard":"QUERY"}});
kvInitTA('persons_title-{multiple-index}', typeahead_7864e59a, [{"display":"value","name":"persons_title_{multiple_index}_data_1","source":persons_title_{multiple_index}_data_1.ttAdapter()}]);

As you see here the id (ex. persons_title-{multiple-index}) is converted to variable name (persons_title_{multiple_index}_data_1), but is not changed the multiple_index to the new index in 'addInput' function.
What do you think about this?

Rename js events

I think we should rename events to more convinient style.
For example,

• addNewRow -> afterAddRow
• removeRow -> afterRemoveRow

Alse can be usefull have event beforeDeleteRow

MaskedInput multiple mask failed

[
                'name' => 'value',
                'title' => 'Phone',
                'type' => MaskedInput::className(),
                'options' => [
                    'class' => 'input-phone',
                    'mask' => [
                        '[phone]',
                        '[phone]',
                        '[phone]',
                    ]
                ]
            ],

Ошибка гинерации префикса

Инициализирую виджет:

<?= $form->field($model, 'phone')->widget(MultipleInput::class) ?>

При этом префикс создается не корректно:

<input type="text" id="representation-phone-phone-1" class="form-control" name="Representation[phone][phone][1]" value="asdfasdf">

Если я правильно понимаю результат должен быть:

<input type="text" id="representation-phone-1" class="form-control" name="Representation[phone][1]" value="asdfasdf">

Проблема наблюдается только в случае, если указывать (либо не указывать) один столбец.
Если указывать несколько столбцов, то все отрабатывает отлично.

Ошибка возникает во всех версия...

Widget для input

Добрый день.
Спасибо за расширение.
Как можно использовать и можно ли вообще использовать widget для одиночного input'a.
Сделал так

<?=$form->field($model,'arrAcc')->widget(MultipleInput::className(),[
        'limit' => 10,
        'columns' =>[
            [
                'type' =>Select2::className(),
                'name' => 'acc',
                'options' => [
                    'pluginOptions' => [
                        'allowClear' => true,
                        'minimumInputLength' => 2,
                        'ajax' => [
                            'url' => \yii\helpers\Url::to(['/ajax-select']),
                            'dataType' => 'json',
                            'data' => new JsExpression('function(params) { return {q:params.term}; }')
                        ],
                        'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
                        'templateResult' => new JsExpression('function(cmp_id) { return cmp_id.text; }'),
                        'templateSelection' => new JsExpression('function (cmp_id) { return cmp_id.text; }'),
                    ],
                ]
            ]
        ]
    ])?>

в итоге в запросе пришел массив следующего вида

[arrAcc] => Array
                (
                    [acc] => Array
                        (
                            [0] => 17
                            [1] => 7
                        )

                )

Можно ли сделать так ,чтобы в запросе при ходил массив следующего вида:

  [arrAcc] => Array
                        (
                            [0] => 17
                            [1] => 7
                        )

Default value for checkbox

'defaultValue' => false

it not works for 'type' => 'checkbox'. All JS-created checkboxes always created as checked.

The ability to use custom template

I think it can be useful be able to set custom template for rendering items.
Currently, the widget uses the table template for rendering items

bad pattern on regexp

Hello
the test case:
Tabular Input with kartik-v/yii2-widget-fileinput:

<?= TabularInput::widget([
    'allowEmptyList' => true,
    'models' => $models,
    'attributeOptions' => [
        // ...
    ],
    'columns' => [
        // ...
        [
            'name'  => 'imageFile',
            'title' => 'imageFile',
            'type'  => FileInput::className(),
            'options' => [
                'options' => ['accept' => 'image/*'],
                'pluginEvents' => [
                    'filecleared' => 'function () {
                            console.log('File cleared!);
            }',
                ],
            ],
        ],
    ],
]) ?>

this code generates the next javascript:

jQuery('#item-{multiple-index}-imagefile').fileinput(fileinput_84f9f1b5);
jQuery('#item-{multiple-index}-imagefile').on('filecleared', function () {
    console.log('File cleared');
});

this js code isn't found by this 'if' in BaseRenderer.php:

if (preg_match('/^[^{]+{multiple-index}.*$/', $js) === 1) {

I recommend the m (PCRE_MULTILINE) regexp modifier:

if (preg_match('/^[^{]+{multiple-index}.*$/m', $js) === 1) {

This working for me.

Sincerely, E.

Incorrect display of buttons when using both 'min' and 'limit'

I have two emails, with limit = 2 and min = 1. When I render the form, there is no red X button next to the second input. When I set the limit to 3 there is no button next to 3rd input.

Generally it looks like the last input doesn't have it's button correctly generated - inspector shows an empty block.

Add rowOptions parameter

I am using the yii2-multiple-input extension
and I want define more than one class to row on tabularInput,

for example:
this class: multiple-input-list__item
I want change to: "multiple-input-list__item and phone-number" 2 classes for one row
and in another to: "multiple-input-list__item and address"

How may I add this ?

thanks man!

(sorry my bad english)

Отсутствует поле в POST запросе при пустом списке.

Никак не пойму.

Добавляю несколько записей, всё ок. удаляю одну, всё ок.
но если удаляю все записи, то при сохранении в POST запросе данное поле вообще нет, поэтому модель считает, что его сохранять ненадо, и в итоге последняя запись так и остается.

подскажите пожалуйста, где я накосячил?

Change system placeholders for avoid conflicts with other widgets

Add prefix to current placeholders. E.g. {index} -> {multiple.index}

Implement of ability to use widget for tabular input

• refactor the current implementation
• implement TabularInput widget
• adapt for using with yii2-fileapi-widget
• add doc about TabularInput
• add doc about table template

Navbar Dropdown Menu is not working after using MultipleInput widget

Hi,
I am using my custom bootstrap theme and your widget in the bootstrap form.Its working fine.but problem is that when i click on navbar dropdown menu then its not opening my dropdown menu.but dropdown menu is working when i removes your widget.

MultipleInputColumn::TYPE_HIDDEN_INPUT does not render hidden input

sample code

 <?= 
        \unclead\widgets\TabularInput::widget([
            'models' => $claimingRules,
            'limit' => 5,
            'addButtonOptions' => [
                'class' => 'btn btn-success',
                'label' =>  Html::tag('i', null, ['class' => 'glyphicon glyphicon-plus']) // also you can use html code
            ],
            'attributeOptions' => [
                'enableAjaxValidation'      => false,
                'enableClientValidation'    => false,
                'validateOnChange'          => false,
                'validateOnSubmit'          => true,
                'validateOnBlur'            => false,
            ],
            'columns' => [
                [
                    'name' => 'id',
                    'title' => 'Hidden ID',
                    'type' => \unclead\widgets\MultipleInputColumn::TYPE_HIDDEN_INPUT
                ],
                [
                    'name'  => 'identifier',
                    'title' => 'Rule ID',
                    'enableError' => true
                ],
                [
                    'name'  => 'percent',
                    'title' => 'Claiming Rule Percent',
                    'enableError' => true
                ],
            ],
        ]) 
    ?>

Customization header

Implement functional customization header of column, similar as in GridView

Улучшение для связанных списков

Хотелось бы иметь возможность задавать что-то вроде

options=>[
    'items'=>function($data){
         return Object::myStaticFunctionGetItems($data->field);
    }
]

То есть иметь возможность задавать массив items через анонимную функцию как и value.
Очень облегчит жизнь при создании связанных списков.

DropdownList

A Как исполизовать? dropDownList ArrayHelper ?

Implement MultipleInputColumn class for encapsulating logic

allow access to field value by name inside "beforeDeleteRow" callback

jQuery('.multiple-input').on('beforeDeleteRow', function(){
     // want to grab the row field value by name as declared in TabularInput column name
})

Deleting of first item problem

I've got a problem with deleting of first element. U can just to move up add button to column header for solving this problem.

urlencoded field token

yii2-elfinder extension is using urlencoded field token - %7Bmultiple-index%7D, which is not replaced in jsTemplate, and then doesn't work correctly.

As a temporary solution I changed line 149 of jquery.multipleInput.js from
jsTemplate = settings.jsTemplates[i].replaceAll('{multiple-index}', data.currentIndex);
to
jsTemplate = settings.jsTemplates[i] .replaceAll('{multiple-index}', data.currentIndex) .replaceAll('%7Bmultiple-index%7D', data.currentIndex);

jQuery issues

I've spent for couple hours trying to get extension work, but could not.

Firstly, you can't use data() like this:

            $wrapper.data('multipleInput', {
                settings: settings,
                currentIndex: 0,
                attributeDefaults: {}
            });

It just doesn't work. The explonation is here: http://stackoverflow.com/questions/6827810/unable-to-set-data-attribute-using-jquery-data-api

Next, where did you get such events?

      $(document).on('click.multipleInput', ....);

I was trying to fix it, but it was like a snowball, and all that I got was just a single text input without able to add fields.

Radio/checkbox lists doesn't work correctly

For radio or checkbox lists does ot work ajax validation because this types of input does not correctly processed on js side

        addAttribute: function () {
            var id = $(this).attr('id'),
                ele = $('#' + $(this).attr('id')),
                wrapper = ele.closest('.multiple-input').first(),
                form = ele.closest('form');

            // do not add attribute which are not the part of widget
            if (wrapper.length == 0) {
                return;
            }

attribute is skipped because system cannot determine wrapper for it.

TabularInput not working in bootstrap modal.

I implement TabularInput widget in bootstrap modal but is not working Add More button and ajax validation.Please check this issue.

dropDownList dont work

New data fine may be added, but if I have already saved the model, and open to edit in the list selected the wrong item..podozrevaju that the problem is in the model MultipleInputColumn примерно в этой строчке $input = Html::$type($name,null, $this->items, $options);

Getting the title based on the attribute model

Great solution, but the 'title' question isn't solved.
The '+' sign staying there alone, without title, I can't find the proper solution unless the one below.
Probably we need a new property to turn on/off the title and for BC.
(I think we need a title when 'allowEmptyList' is true...)

    protected function guessColumns()
    {
        if (empty($this->columns) && $this->hasModel()) {
            $this->columns = [
                [
                    'name' => $this->attribute,
                    'type' => MultipleInputColumn::TYPE_TEXT_INPUT,
                    'title' =>$this->model->getAttributeLabel($this->attribute), // recommended line
                ]
            ];
        }
    }

Improve phpDoc

Add supporting InputWidget as input type