Vegas CMF Form Elements

Vegas\Forms\Element\Cloneable

Element with add/remove field buttons. You can use single field as base element (generated field name: cloneableElementName[]) or array of fields (generated fields names: cloneableElementName[0..n][baseFieldName]).

All required js and css files are included in vegas library. Check installation guide for more details.

Minimal configuration

namespace Foo\Forms;

use Vegas\Forms\Element\Text;
use Vegas\Forms\Element\Cloneable;

class Bar extends \Vegas\Forms\Form
{
    public function initialize()
    {
        // always set the base element!
        $answers = new Cloneable('answers');
        $answers->getDecorator()->setTemplateName('jquery');
        $answers->setBaseElements(array(
            new Text('field1'),
            new Text('field2')
        );
        // and/or
        $answers->addBaseElement(new Text(''));

        $this->add($answers);

        // ...
    }
}

It is possible to render cloneable field as one or get row and render each row element separately:

{{ form.get('answers') }}
{% for row in form.get('answers').getRows() %}
    <tr>
        {% for item in row.getElements() %}
            <td>{{ item }}</td>
        {% endfor %}
    </tr>
{% endfor %}

Full configuration

As you can see in the code below, you can also add validators to the base elements and enable sortable option:

namespace Foo\Forms;

use Phalcon\Forms\Element\Text;
use Vegas\Validation\Validator\PresenceOf;
use Vegas\Validation\Validator\SizeOf;

class Bar extends \Vegas\Forms\Form
{
    public function initialize()
    {
        $name = new Text('name');
        $name->addValidator(new PresenceOf());

        $lastname = new Text('lastname');
        $lastname->addValidator(new PresenceOf());

        $man = new Cloneable('list_of_man');
        $man->getDecorator()->setTemplateName('jquery');
        $man->setLabel($this->i18n->_('List'));
        $man->setBaseElements(array($name, $lastname));
        $man->addValidator(new SizeOf(array('min' => 2, 'max' => 6)));
        $man->setUserOption('sortable', true);

        $this->add($man);

        // ...
    }
}

By default, if you set up forms with php /path/to/cli.php vegas:assets publish task, cloneable.js will run following code:

$(document).ready(function() {
    $('[vegas-cloneable]').vegasCloner();
});

You can customize options for cloneable and/or add this jQuery function to another selector like this:

$(document).ready(function() {
    $('.my-custom-cloneable-template').vegasCloner(options);
});

Possible options for vegasCloner function with default values:

{
    'buttons': {
        'add': {
            'text': 'Add next',
            'class': 'btn-form-submit'
        },
        'remove': {
            'text': 'Remove last',
            'class': 'btn-form-cancel'
        },
        'insertAfterSelector': jQuerySelector // by default it is just whole cloneable container
    },
    'row': {
        'selector': 'fieldset',
        'removeButton': $('<a>').html('x')
            .attr('href','javascript:void(0);')
            .addClass('cloner-row-remove')
    },
    'sortable': {
        'callback': function() {
            // your custom callback to replace cloneable default
        }
    }
}

Each time when row is added or removed, the cloned action is triggered on the cloneable container. You can add your own functionality to this event.

Important! Preventing default event behavior may break script functionality.

$('[vegas-cloneable]').on('cloned', function() {
    // do something
});