Fügen Sie eine css-Klasse zu einem Feld in wtform hinzu

Question

Ich erzeuge eine dynamische Form mit wtforms (und Kolben). Ich würde gerne einige benutzerdefinierte CSS-Klassen zu den Feldern hinzufügen, die ich erzeuge, aber bisher konnte ich das nicht tun. Mit der Antwort, die ich gefunden habe here, habe ich versucht, ein benutzerdefiniertes Widget zu verwenden, um diese Funktionalität hinzuzufügen. Es wird in fast genau der gleichen Art und Weise wie die Antwort auf diese Frage umgesetzt:

class ClassedWidgetMixin(object): 
    """Adds the field's name as a class. 

    (when subclassed with any WTForms Field type). 
    """ 

    def __init__(self, *args, **kwargs): 
    print 'got to classed widget' 
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs) 

    def __call__(self, field, **kwargs): 
    print 'got to call' 
    c = kwargs.pop('class', '') or kwargs.pop('class_', '') 
    # kwargs['class'] = u'%s %s' % (field.name, c) 
    kwargs['class'] = u'%s %s' % ('testclass', c) 
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs) 


class ClassedTextField(TextField, ClassedWidgetMixin): 
    print 'got to classed text field' 

In der Ansicht, ich dies tun, das Feld zu erstellen (ClassedTextField aus Formen eingeführt, und f ist eine Instanz der Grundform):

f.test_field = forms.ClassedTextField('Test Name') 

der Rest der Form korrekt angelegt wird, aber das jinja:

{{f.test_field}} 

erzeugt diese Ausgabe (keine Klasse):

<input id="test_field" name="test_field" type="text" value=""> 

Alle Tipps wären toll, danke.

Answer 1

Sie müssen nicht auf die Widget-Ebene gehen, um ein HTML-Klassenattribut an das Rendering des Felds anzuhängen. Sie können es einfach mit dem Parameter class_ in der Jinja-Vorlage angeben.

z.B.

{{ form.email(class_="form-control") }} 

im folgenden HTML führt ::

<input class="form-control" id="email" name="email" type="text" value=""> 

diese dynamisch zu tun, sagen wir, den Namen der Form als der Wert des HTML-class-Attribut verwenden, können Sie folgendes tun:

Jinja:

{{ form.email(class_="form-style-"+form.email.name) }} 

Ausgang:

Weitere Informationen zum Injizieren von HTML-Attributen finden Sie unter official documentation.