如何使用select2 v4为标签创建symfony表单类型

Question

Im trying to update an already-created form type ( TagsType ) from select2 v3 to v4. But I found the problem that the new select2 use selects instead of text field. The following code works fine with v3.

class TagsType extends AbstractType
{

    /**
     * @inheritdoc
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->addViewTransformer(new StringToArrayTransformer());
    }

    /**
     * {@inheritdoc}
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $attr = isset($view->vars['attr']) ? $view->vars['attr'] : [];

        $view->vars['attr'] = array_merge($attr, ['data-toggle' => 'tags']);
    }

    /**
     * @inheritdoc
     */
    public function getParent()
    {
        return 'text';
    }

    /**
     * @inheritdoc
     */
    public function getName()
    {
        return 'tags';
    }
}

StringToArrayTransformer:

class StringToArrayTransformer implements DataTransformerInterface
{

    /**
     * @inheritdoc
     */
    public function transform($value)
    {
        if (!$value ) {
            return [];
        }

        if (!is_array($value)) {
            throw new TransformationFailedException('Expected a Array.');
        }

        return implode(',', $value);
    }

    /**
     * @inheritdoc
     */
    public function reverseTransform($value)
    {
        if (null === $value) {
            return [];
        }

        if (!is_string($value)) {
            throw new TransformationFailedException('Expected a String.');
        }

        return explode(',', $value);
    }
}

The above code works fine with a Entity with field of type simple_array (comma separated). I need do the same but using the new vesion of select2.

Refactoring:

class TagsType extends AbstractType
{

   /**
     * {@inheritdoc}
     */
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $attr = isset($view->vars['attr']) ? $view->vars['attr'] : [];

        $view->vars['attr'] = array_merge($attr, ['data-toggle' => 'tags']);
    }

    /**
     * @inheritdoc
     */
    public function getParent()
    {
        return 'choice';
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(['multiple' => true]);
    }


    /**
     * @inheritdoc
     */
    public function getName()
    {
        return 'tags';
    }
}

The refactor generate a select tag with multiple but empty. And when try to add some option ( Tag ) the validation fails because dynamic creation of new options in the select.

My questions:

• How to implement a choice with dynamic options in symfony?
• How to set default choices from field data (array)

Answer 1

Forget all about ',' and convert string to array or vice versa and save each Tag entity individually.

So, to make your form compatible with select2-v4.x you need one EntityType field with 'multiple' attribute set to TRUE.

Every thing is handled by symfony, each option(s) in select tag of your form is connected to its entity.

I just found this solution and it works for me, but I don't know maybe some things are missing...

Answer 2

Very old question, but I found it from Search engine. I tried to make it with simple_array + data transformer — it's wrong way (as @YaserKH said). Better to make tags as entity Tag etc. (you can find in the official docs ). But if you need simple solution for some reasons (as me):

1. Create Text type column in database (not simple_array)
2. Define it as HiddenType in form builder:

    $builder->add('tagsForSearch', HiddenType::class, [ 'required' => false ])

3. Make twig like:

    {{ form_row(form.tagsForSearch) }}
    <select id="tags" multiple="multiple">
        {% for tag in form.tagsForSearch.vars.value|split(',')|default %}
            <option value="{{ tag|raw }}" selected="selected">{{ tag|raw }}</option>
        {% endfor %}
    </select>

4. And script:

$('#tags').select2({
    tags: true
});
$('#form').submit(function () {
    var tags = $('#tags').select2().val().join(',');
    $('#{{ form.tags.vars.id }}').val(tags);
});