向 wtform 中的字段添加 css 类

Question

我正在使用 wtforms（和烧瓶）生成动态表单。我想在我生成的字段中添加一些自定义 css 类，但到目前为止我一直无法这样做。使用我找到的答案here，我尝试使用自定义小部件来添加此功能。它的实现方式与该问题的答案几乎完全相同：

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')

表单的其余部分已正确创建，但是这个 jinja：

{{f.test_field}}

产生这个输出（无类）：

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

任何提示都会很棒，谢谢。

Answer 1

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

例如

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

将产生以下 HTML::

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

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

神社：

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

输出：

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

有关注入 HTML 属性的更多信息，请查看official documentation。

Answer 2

如果您想以编程方式将 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>

Answer 3

在 WTForms 2.1 我使用extra_classes，如下行：

1.第一种方式

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

我们也可以使用@John Go-Soco 的答案在我们的表单字段上使用render_kw 属性，就像这样。

2。第二种方式

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

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

Answer 4

虽然很晚，但这是我发现的。在渲染模板时，您可以在括号内传递任何键值对，它只是在渲染时放置这些键值。 例如，如果您必须将一个类与一些占位符文本一起放置，您可以像下面这样：

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

实际上会呈现如下：

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

基本上，您甚至可以尝试通过添加一些不存在的具有某些值的 HTML 属性并进行渲染。

为了减轻痛苦，最好将辅助函数用作宏并直接渲染它们而不是实际字段。 假设您有公共类和错误类。 你可以有一个这样的辅助宏：

{% 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") }}

这里我使用了引导类，只需根据需要修改辅助函数即可！

希望对您有所帮助！编码愉快！