Symfony : Dynamic add select box ( Add Dynamically

Question

I'm searching how to implement a system of choosing languages dynamically using form builder.

so we must have two html array inputs field : name="languages[]" and the second will be name="languges_level[]"

So this system allows the user to set the language which he can speak with his level on it.

The User can add/remove Language dynamically before he submits the Form.

The Questions :

1- Form Level : what will be the field form type? I have to add 2 form fields which will be combined to create my result array which will be stored in the database. So this two field will be not mapped with ORM.

->add('langues', TYPEXXX:class) 
->add('langues_level', TYPEXXX:class)

3- Twig Level: should i make some change in the twig as well?

So what will be the best solution in my case?

My first try is :

->add('languages', CollectionType::class, array(
    'entry_type'   => ChoiceType::class,
    'entry_options'  => array(
        'choices'  => array(
                        'Français' => 'Français',
                        'English'     => 'English',
                        'Italien'    => 'Italien',
                        'Espanish'    => 'Espanish',
        ),
        'label'      => ' ',
    ),
))
->add('language_levels', CollectionType::class, array(
    'entry_type'   => ChoiceType::class,
    'entry_options'  => array(
        'choices'  => array(
                        'Beginner' => 'Beginner',
                        'Medium'     => 'Medium',
                        'Good'    => 'Good',
        ),
        'label'      => ' ',
    ),
));

but this don't work as I mentioned in the picture .. who had a perfect solution plz ?

Answer 1

I think you need a Collection of Forms.

so we must have two html array inputs field : name="langues[]" and the second will be name="langes_level[]"

(..)

3- Twig Level: should i make some change in the twig as well?

(..)

4- Javascript Level, i can develop it when the inputs are clean created in the html.

No, no and no. Describing how your 'array input fields' should be named exactly is not the right mentality if you're using a framework like Symfony. Describe your entity fields, describe your form fields and Symfony will give all form elements a name. Symfony Forms will render and handle the form for you, so there is (very likely) no need to be bothered what the form element names are exactly.

Your entity class:

class LanguageLevel
{
    protected $user;
    protected $language;
    protected $level;

    //getters and setters
}

Create a form type:

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('languages', CollectionType::class, array(
            'entry_type' => LanguageLevelType::class,
            'allow_add' => true,
        ));
    }
}

And a LanguageLevelType:

class LanguageLevelType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
        ->add('language', LanguageType::class)
        ->add('level', ChoiceType::class, array(
            'choices'  => array(
                'Good' => 5,
                'Bad' => 1,
             ),
        ));
    }
}

If the rendered output is not what you want, check the documentation if you can configure the Form Types. Manually changing the twig template, your controller and/or javascripts for a specific case is possible, but I think the 'Collection of Forms' from above will cover your use case.