
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:

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:
Este es mi twig:
y este es el resultado de esto:

Si alguien sabe como puedo arreglar esto se lo agradecería.
Saludos.

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:

Si alguien sabe como puedo arreglar esto se lo agradecería.
Saludos.
Valora esta pregunta


0