Symfony - Como customizar un formulario generado por colecciones a twig?

   
Vista:
Imágen de perfil de Mauricio

Como customizar un formulario generado por colecciones a twig?

Publicado por Mauricio (1 intervención) el 04/05/2016 16:56:42
Estimados tengo el siguiente problema, estoy desarrollando una aplicación de inventario para mi empresa, donde necesito generar un formulario que se pueda replicar en varios formularios para un ingreso masivo de datos, para lo cual realicé lo que se muestra en la siguiente imágen, donde al presionar en el botón "+" el formulario debe clonarse hacia abajo para permitir el ingreso de varios campos:

maqueta1

he estado realizando pruebas donde ya logro replicar un formulario pero no logro darle el formato que necesito en la plantilla twig ya que no puedo manipular los widget por separado, este es el código de mi controlador:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public function pruebaAction(Request $request){
        $lineaMovil = new LineaMovil();
        $form = $this->createFormBuilder($lineaMovil)
            ->add('numero', 'collection', array(
                'type'   => 'integer',
                'prototype' => true,
                'allow_add' => true,
                'allow_delete' => true,
                ))
            ->add('compania','collection', array(
                'type'   => 'text',
                'prototype' => true,
                'allow_add' => true,
                'allow_delete' => true,)
                )
            ->add('habil', 'collection', array(
                'type' => 'choice',
                'prototype' => true,
                'allow_add' => true,
                'allow_delete' => true,
                'options'=> array(
                    'choices' => array(
                    true => 'Línea Habilitada',
                    false => 'Línea Inhabilitada')
                    )
                ))
            ->add('simcard', 'collection', array(
                'type' => 'text',
                'prototype' => true,
                'allow_add' => true,
                'allow_delete' => true,
                'options' => array(
                    'required' => FALSE)
                ))
            ->getForm();
        $form->handleRequest($request);
        if ($form->isValid())
        {
            $em = $this->getDoctrine()->getManager();
            $em->persist($lineaMovil);
            $em->flush();
        }
        return $this->render('admin/prueba.html.twig', array('form' => $form->createView(),));
    }

Este es mi twig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
{% extends "base.html.twig" %}
 
{% block body %}
    <div class="col-md-12 tras"><br>
    {{ form_start(form) }}
 
    <div id="lista-campos"
        data-prototype="{{ form_widget(form.numero.vars.prototype)|e }}
        {{ form_widget(form.compania.vars.prototype)|e }} {{ form_widget(form.habil.vars.prototype)|e }} 
        {{ form_widget(form.simcard.vars.prototype)|e }}">
 
    {% for emailField in form %}
        {{ form_label(form) }}
        {{ form_widget(form) }}
    {% endfor %}
    </div>
 
    <hr>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-circle pull-right" id='agregar-campo'>
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            </button>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary animar">Agregar equipo celular</button>
            <button type="reset" class="btn btn-danger animar pull-right">Limpiar formulario</button>
        </div>
    </div>
    <br>
{{ form_end(form) }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    // keep track of how many email fields have been rendered
    var contador = '{{ form|length }}';
 
    jQuery(document).ready(function() {
        jQuery('#agregar-campo').click(function(e) {
            e.preventDefault();
 
            var listaCampos = jQuery('#lista-campos');
 
            // grab the prototype template
            var newWidget = listaCampos.attr('data-prototype');
 
            // replace the "__name__" used in the id and name of the prototype
            // with a number that's unique to your emails
            // end name attribute looks like name="contact[emails][2]"
            newWidget = newWidget.replace(/__name__/g, contador);
            contador++;
 
            // create a new list element and add it to the list
            var newLi = jQuery('<div></div><br>').html(newWidget);
            newLi.appendTo(listaCampos);
 
        });
    });
</script>
{% endblock %}

y este es el resultado de esto:


maqueta2

Si alguien sabe como puedo arreglar esto se lo agradecería.
Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder