Django自定义表单字段如何处理多用户输入？获取所有值

在Django中实现支持前端动态添加多个文本输入的自定义表单字段时，遇到以下问题：Request.POST中能看到所有输入值，但自定义字段的to_python方法仅处理最后一个文本输入值。

现有简化代码 #

fields.py #

class MultiCharField(forms.Field):
    widget = Mywidget

    def __init__(self, *args, **kwargs):
        super(MultiCharField, self).__init__(*args, **kwargs)     
    
    def to_python(self, value):
        print("value: " + str(value)) # 仅打印最后一个文本输入值
        return value if isinstance(value, list) else [value]

mywidget.html #

<div class="choice">
        <input type="text" class="form-control" id="id-{{ widget.name }}" name="{{ widget.name }}"
        {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %} />
        <a href="#" class="add-field">Add Another</a>
</div>
<script>
    $( ".add-field" ).on( "click", function() {
        $('<div class="choice"><input type="text" name="{{ widget.name }}" /><a href="#" class="remove-field">Remove</a></div>').insertAfter($(this).parent());
        $('.remove-field').on('click', function() {
            $(this).parent().remove();
    });
    });
</script>

forms.py #

class QuestionModelForm(forms.ModelForm):
    options = MultiCharField()

    class Meta:
        model = Question

自定义Widget代码 #

class Mywidget(forms.Widget):
    template_name = 'mywidget.html'

    def get_context(self, name, value, attrs=None):
        return {'widget': {
            'name': name,
            'value': value,
        }}

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name).render(context)
        return mark_safe(template)

1. 修改前端输入框的name属性 #

Django默认只会获取同名参数的最后一个值，要让它识别为列表，需要把输入框的name改成{{ widget.name }}[]，这样POST请求会自动把所有同名值打包成列表。

修改mywidget.html中的两处name属性：

<!-- 初始输入框 -->
<input type="text" class="form-control" id="id-{{ widget.name }}" name="{{ widget.name }}[]"
{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %} />

<!-- 动态添加的输入框 -->
$('<div class="choice"><input type="text" name="{{ widget.name }}[]" /><a href="#" class="remove-field">Remove</a></div>').insertAfter($(this).parent());

2. 优化自定义字段的to_python方法 #

现在to_python会收到完整的输入值列表，可以添加空值过滤逻辑，避免无效输入：

def to_python(self, value):
    # 处理单值情况，确保返回列表
    if not isinstance(value, list):
        value = [value]
    # 过滤空字符串和纯空格的输入
    return [item.strip() for item in value if item.strip()]

3. 优化Widget的回显逻辑（可选） #

如果需要在表单验证失败后回显已输入的多个值，需要调整Widget的上下文处理和模板渲染：

修改Mywidget的get_context方法 #

def get_context(self, name, value, attrs=None):
    context = super().get_context(name, value, attrs)
    # 确保value是列表格式，空值则返回空列表
    context['widget']['values'] = value if isinstance(value, list) else [value] if value else []
    context['widget']['name'] = name
    return context

修改mywidget.html模板 #

<!-- 渲染已有的输入值 -->
{% for val in widget.values %}
<div class="choice">
    <input type="text" class="form-control" name="{{ widget.name }}[]" value="{{ val|stringformat:'s' }}" />
    <a href="#" class="remove-field">Remove</a>
</div>
{% endfor %}

<!-- 添加一个空的输入框用于新增 -->
<div class="choice">
    <input type="text" class="form-control" name="{{ widget.name }}[]" />
    <a href="#" class="add-field">Add Another</a>
</div>

<script>
    // 用事件委托绑定，确保动态添加的元素能触发事件
    $(document).on("click", ".add-field", function() {
        $('<div class="choice"><input type="text" name="{{ widget.name }}[]" /><a href="#" class="remove-field">Remove</a></div>').insertAfter($(this).parent());
    });

    $(document).on("click", ".remove-field", function() {
        $(this).parent().remove();
    });
</script>

内容的提问来源于stack exchange，提问作者Naser