Subclassing forms.CharField with additional attribute

[Sandeep Raheja]

I am trying to generate a form dynamically and want to assign indentation of form fields. I am trying to assign an custom attribute offset
to forms.CharField in subclass. I plan to use this logic to create a form dynamically from an xml file, where the fields would be indented based on the depth of the node.

I am unable to retrieve the value of offset while rendering the template and hence unable to assign the margin-left style parameter. The final html output is also shown.



My forms.py file :



   

 class MyCharField(forms.CharField):
        def __init__(self, *args, **kwargs):
            self.offset = kwargs.pop('offset', 0)
            super(MyCharField, self).__init__(*args, **kwargs)

   

class MyDynamicForm(forms.Form):
        def __init__(self, *args, **kwargs):
            super(MyDynamicForm, self).__init__(*args, **kwargs)
            self.fields["Field_A"] = MyCharField(label="Input A", offset="5")
            self.fields["Offset_Field_B"] = MyCharField(label="Input B", offset="50")

       

My Views.py looks like this:

   

class MyDynamicView(View):
        template_name = 'demo/myform.html'
        form_class = MyDynamicForm

        def get(self, request, *args, **kwargs):
            form = self.form_class()
            return render(request, self.template_name, {'form': form})

My template file using bootstrap looks like this:

   

{% extends 'demo/base.html' %}
    {% load bootstrap3 %}
    {% block content %}
        <form role="form" method="post">
            {% csrf_token %}
            {% for field in form %}
            <div class="form-group bootstrap3-required">
                <label class="col-md-3 control-label " style = "margin-left: {{field.offset}}px" for="{{ field.name }}">{{ field.label}}</label>
                <div class="col-md-9">
                    <input class="form-control" id="id_{{field.name}}" name="{{ field.name }}" placeholder="{{field.label}}" style="margin-left:{{field.offset}}px" title="" required="" type="text"/>
                </div>
            </div>
            {% endfor %}  
            {% buttons submit='OK' reset='Cancel' layout='horizontal' %}{% endbuttons %}
        </form>
    {% endblock %}

The html output is:

   

<form role="form" method="post">
        <input type='hidden' name='csrfmiddlewaretoken' value='lTy0rc2r9KNiNNPosUoriUlNzYBpgoVpael1MYLOczFECO7H7LXdES6EGBhUoXx0' />
       
       
        <div class="form-group bootstrap3-required">
            <label class="col-md-3 control-label " style = "margin-left: px" for="Field_A">Input A</label>
            <div class="col-md-9">
                <input class="form-control" id="id_Field_A" name="Field_A" placeholder="Input A" style="margin-left:px" title="" required="" type="text"/>
            </div>
        </div>
       
        <div class="form-group bootstrap3-required">
            <label class="col-md-3 control-label " style = "margin-left: px" for="Offset_Field_B">Input B</label>
            <div class="col-md-9">
                <input class="form-control" id="id_Offset_Field_B" name="Offset_Field_B" placeholder="Input B" style="margin-left:px" title="" required="" type="text"/>
            </div>
        </div>
       
       
        <div class="form-group"><label class="col-md-3 control-label">&#160;</label><div class="col-md-9"><button class="btn btn-default" type="submit">OK</button> <button class="btn btn-default" type="reset">Cancel</button></div></div>
    </form>