2

que cuando se renderiza un form de django los field se separan en etiquetas p Como se muestra en la etiqueta elementsintroducir la descripción de la imagen aquí

todo ese grupo de etiquetas p necesito dividirlo en 4 grupos de div, para organizarlos en el modal, pudiendo evitar tener que hacerlo 1 por 1 brindando un mejor responsive

mi forms.py donde llamo al modelo central para organizar los field que se mostraran en la vista

class CentralForm(forms.ModelForm):

    class Meta:

        model = central
        fields = [
            'idCentral',
            'nameCentral',
            'indoor',
            'nemonico',
            'fkAtributosCiudades',
            'zona',
            'dirNorm',
            'barrio',
            'comuna',
            'estados',
            'creadoPorI',
            'position'
        ]

        widgets = {
            'position': LeafletWidget(attrs=LEAFLET_WIDGET_ATTRS),
            'dirNorm': DiretionWidget(widgets=any)
        }

mi widgets.py aqui tengo alojado la parte del formulario donde esta escrita el campo direccion (funcional)



class DiretionWidget(forms.MultiWidget):
   def __init__(self, widgets, attrs=None):
       widgets = (
           forms.Select(choices=DIR_CHOICES),
           forms.TextInput(attrs={'placeholder': 'numero Ej: 4b, 4'}),
           forms.Select(choices=CAR_CHOICES),
           forms.TextInput(attrs={'placeholder': 'numero de casa Ej: 4b-54,4-56'}),
           forms.TextInput(attrs={'placeholder': 'Datos adicionales (Opcional)'})
       )
       super(DiretionWidget, self).__init__(widgets, attrs)

   def decompress(self, value):
       if value:
           return value
       return [None, None, None, None, None, None]

   def value_from_datadict(self, data, files, name):
       datelist = [
           widget.value_from_datadict(data, files, name + '_%s' % i)
           for i, widget in enumerate(self.widgets)]
       try:
           D = str(datelist[0])+' '+str(datelist[1])+' '+str(datelist[2])+' #'+str(datelist[3])+'/'+str(datelist[4])

       except ValueError:
           return ''
       else:
           return str(D)



mi views.py



class CentralCreate(CreateView):
   model = central
   template_name = 'Central/CentralCreate.html'
   form_class = CentralForm
   success_url = reverse_lazy('listCentral')

   def get_context_data(self, **kwargs):
       context = super().get_context_data(**kwargs)
       form = CentralForm()
       form.fields['dirNorm'].label = 'Direccion'
       context['form'] = form
       return context


mi CreateCentral.html

{% load static %}
{% load leaflet_tags %}
{% leaflet_js plugins="ALL" %}
{% leaflet_css plugins="ALL" %}
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script type='text/javascript' src='{% static 'dist/leaflet.ajax.min.js'%}'></script>
<style type="text/css">
   .leaflet-container {
       height: 20em;
   }

</style>
{% block form %}
<div class="modal-dialog modal-lg" id="myModal" role="document">
   <div class="modal-content">
       <div class="modal-header">
           <h2 class="modal-title"> Crear Central</h2>
           <button class="close" type="button" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
           </button>
       </div>
       <div class="modal-body">
            <form action="{% url 'createCentral' %}" method="POST">
                {% csrf_token %}
                {{ form.as_p }}
               <input type="submit" value="save"/>
            </form>
       </div>

   </div>

</div>
{% endblock %}
<script type="text/javascript">
       map = window['leafletmapid_position-map']
       setTimeout(function(){ window['leafletmapid_position-map'].invalidateSize();},400)
</script>

1 respuesta 1

0

En realidad puedes separar los campos de los formularios utilizando tan solo las plantillas.

Yo utilizo un fichero form-field.html como base para cada uno de los campos:

<div class='form-field {% if field.errors %}form-field__error{% endif %}'>
{% if field.errors %}
    <div class="form-field__errors">
        {% for item in field.errors %}
        <p class="error">{{ item }}</p>
        {% endfor %}
    </div>
{% endif %}

    <div class="form-field__controls group-{{ field.widget_type }}">
        <label for="{{ field.id_for_label}}">{{ field.label|capfirst }}</label>
        {{ field }}
    </div>

{% if field.help_text %}
    <div class='form-field__help'>{{ field.help_text|striptags }}</div>
{% endif %}
</div>

En la plantilla de la vista, no tengo más que utilizar este “componente” para cada campo del formulario:

<form>
    {% for field in form %}
    {% include 'form-field.html' %}
    {% endfor %}

    <button type="submit">enviar</button>
</form>

Hay buena documentación (pero en inglés): Looping over the form’s fields

La ventaja es que preparas la plantilla una vez y puedes reutilizarla en todos tus proyectos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.