将 css 类添加到 wtform 中的字段

我正在使用 wtforms (和 flask)生成一个动态表单。我想添加一些自定义的 css 类到我正在生成的字段中，但是到目前为止我还不能这样做。使用我找到的 给你的答案，我尝试使用一个自定义小部件来添加这个功能。它的执行方式与这个问题的答案几乎完全相同:

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'

在视图中，我这样做是为了创建字段(ClassedTextField 是从表单导入的，f 是基本表单的一个实例) :

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

形式的其余部分是正确创建的，但是这个忍者:

{{f.test_field}}

产生这个输出(没有类) :

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

任何建议都行，谢谢。

74643 次浏览
小开
最佳答案

实际上，您不需要进入小部件级别，就可以将 HTML 类属性附加到字段的呈现中。您可以简单地使用 jinja 模板中的 class_参数来指定它。

例如:。

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

如有不符合提交文件的情况，会导致下列 HTML:

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

要动态执行此操作，例如，使用表单的名称作为 HTML class 属性的值，可以执行以下操作:

金贾:

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

产出:

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

有关注入 HTML 属性的更多信息，请查看 正式文件。

小开

如果您希望以编程方式将 css 类(或任何其他属性)包含到表单字段中，那么可以使用 render_kw参数。

例如:

r_field = RadioField(
'Label',
choices=[(1,'Enabled'),(0,'Disabled')],
render_kw={'class':'myclass','style':'font-size:150%'}
)

将会显示为:

<ul class="myclass" id="r_field" style="font-size:150%">
<li><input id="r_field-0" name="r_field" type="radio" value="1"> <label for="r_field-0">Enabled</label></li>
<li><input id="r_field-1" name="r_field" type="radio" value="0"> <label for="r_field-1">Disabled</label></li>
</ul>
小开

在 WTForms2.1中，我使用 extra_classes，就像下面这行:

第一种方式

\{\{ f.render_form_field(form.email, extra_classes='ourClasses') }}

我们还可以使用@John Go-Soco 回答在表单字段中使用 render_kw属性，如下所示。

第二条路

style={'class': 'ourClasses', 'style': 'width:50%;'}
email = EmailField('Email',
validators=[InputRequired(), Length(1, 64), Email()],
render_kw=style)

但我更喜欢用第一种方式。

小开

虽然很晚了，但我发现。在呈现模板时，您可以在括号内传递任何键-值对，并且它只是在呈现时放置那些键值。 例如，如果你不得不把一个类和一些占位符文本放在一起，你可以这样做:

\{\{ form.email(class='custom-class' placeholder='email here') }}

将实际呈现如下:

<input class="custom-class" id="email" name="email" placeholder="email here" type="text" value="">

基本上，您甚至可以尝试通过添加一些不存在的具有某些值的 HTML 属性来进行实验，然后将其呈现。

为了减少痛苦，最好将 helper 函数作为宏，并直接呈现它们而不是实际字段。 假设您有常见的类和错误类。 您可以有这样一个助手宏:

{% macro render_field(field,cls,errcls) %}


{% if field.errors %}
<div class="form-group">
<label for="\{\{ field.id}}">\{\{ field.label.text }}</label>
    

\{\{ field(class = cls + " " + errcls,**kwargs) | safe}}
<div class="invalid-feedback">
{% for error in field.errors %}
<span> \{\{error}}</span>
{% endfor %}
</div>
</div>


{% else %}


<div class="form-group">
<label for="\{\{ field.id}}">\{\{ field.label.text }}</label>
\{\{ field(class = cls,**kwargs) | safe}}
</div>
  

{% endif %}
{% endmacro %}

现在，当呈现一个字段时，您可以像下面这样调用该字段，并在模板中使用如下附加属性:

\{\{render_field(form.email,cls="formcontrol",errcls="isinvalid",placeholder="Your Email") }}

在这里我已经使用了引导类，只是修改了助手函数，以满足您的需要！

希望能帮上忙，编程愉快！


提交答案