【问题标题】:How to add additional classes to django form field如何向 django 表单字段添加其他类
【发布时间】:2014-07-06 19:39:21
【问题描述】:

我最近才了解到:

Form.error_css_class
Form.required_css_class

文档:https://docs.djangoproject.com/en/dev/ref/forms/api/#django.forms.Form.error_css_class

所以通过在表单中​​定义 'error_css_class' 和 'required_css_class'

class MyForm(forms.Form):
    error_css_class = 'error'
    required_css_class = 'required'

    name = forms.CharField(...)

我能做到:

<div class="field-wrapper {{ form.name.css_classes }}">
...
</div>

这将输出:

<div class="field-wrapper required">
...
</div>

但是我想向该字段添加其他类,例如我想为“名称”字段添加“文本名称”css 类。阅读文档,我认为这是可能的。

https://docs.djangoproject.com/en/dev/ref/forms/api/#django.forms.BoundField.css_classes

看完上面我尝试做的事

self.fields['name'].css_classes('name text')

这行不通。我明白了

'CharField' object has no attribute 'css_classes'

我也试过

name = forms.CharField(css_classes='name text')

类型错误

__init__() got an unexpected keyword argument 'css_classes'

我知道我可以向字段小部件添加额外的属性

self.fields['name'].widget.attrs['class'] = 'name text'

但我想将 css 类添加到字段包装器中。

我可以编写一个自定义模板标签...来检查字段名称/类型并返回适当的 css 类...但是如果有内置的东西...我希望保持我的模板干净:-)。

此外,每个字段的硬编码 css 类也不是一种选择 .. 因为表单字段是动态的。

任何帮助将不胜感激。

【问题讨论】:

    标签: css django forms django-templates


    【解决方案1】:

    我想出了如何使用自定义 BoundField 来做到这一点

    from django.forms import forms
    
    class CustomBoundField(forms.BoundField):
    
        def css_classes(self, extra_classes=None):
            # logic for determining css_classes has been omitted 
            extra_classes = ['name', 'text']
            return super(CustomBoundField, self).css_classes(extra_classes=extra_classes)
    

    在我的表单中,我覆盖了 getitem

    def __getitem__(self, name):
        try:
            field = self.fields[name]
        except KeyError:
            raise KeyError('Key %r not found in Form' % name)
        return CustomBoundField(self, field, name)
    

    【讨论】:

    • 太好了,为了避免硬编码向 CustomBoundField 类添加属性:并在 css_classes 中调用 self.extra_classes
    猜你喜欢
    • 1970-01-01
    • 2013-07-22
    • 2020-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-03
    • 2021-05-21
    相关资源
    最近更新 更多