web-dev-qa-db-ja.com

フィールドをフォームに動的に追加します

フォームに3つのフィールドがあります。送信ボタンと「フィールドを追加」ボタンがあります。フォームクラスで__init__メソッドを使用してフィールドを追加できることを理解しています。

Python and Django=が初めてで、初心者の質問にこだわっています。私の質問は：

[追加フィールドを追加]ボタンをクリックすると、追加フィールドを追加するプロセスはどうなりますか？

フォームを再度レンダリングする必要がありますか？

__init__をいつ、どのように呼び出すか、または呼び出す必要さえありますか？

__init__に引数を渡すにはどうすればよいですか？

pythondjangodjango-forms
54
Afshin

フォームは、POST（または盲目的に属性をチェック））から渡されたいくつかの変数に基づいて構築する必要があります。そのため、HTMLには、検証のために適切な量のフィールドを構築するために存在するフィールド数に関する情報を含める必要があります。

この問題はFormSetsが機能する方法で見ていきます。アクティブなフォームの数を含む隠しフィールドがあり、各フォーム名にはフォームインデックスが付加されます。

実際、1つのフィールドFormSetを作成できます

https://docs.djangoproject.com/en/dev/topics/forms/formsets/#formsets

FormSetを使用したくない場合は、いつでも自分でこの動作を作成できます。

これはゼロから作成されたものです-それはあなたにいくつかのアイデアを与えるはずです。また、引数を___init___に渡すことに関する質問に答えます。引数をオブジェクトコンストラクターに渡すだけです：MyForm('arg1', 'arg2', kwarg1='keyword arg')

フォーム

_class MyForm(forms.Form):
    original_field = forms.CharField()
    extra_field_count = forms.CharField(widget=forms.HiddenInput())

    def __init__(self, *args, **kwargs):
        extra_fields = kwargs.pop('extra', 0)

        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['extra_field_count'].initial = extra_fields

        for index in range(int(extra_fields)):
            # generate extra fields in the number specified via extra_fields
            self.fields['extra_field_{index}'.format(index=index)] = \
                forms.CharField()
_

表示する

_def myview(request):
    if request.method == 'POST':
        form = MyForm(request.POST, extra=request.POST.get('extra_field_count'))
        if form.is_valid():
            print "valid!"
    else:
        form = MyForm()
    return render(request, "template", { 'form': form })
_

HTML

_<form>
    <div id="forms">
        {{ form.as_p }}
    </div>
    <button id="add-another">add another</button>
    <input type="submit" />
</form>
_

JS

_<script>
form_count = Number($("[name=extra_field_count]").val());
// get extra form count so we know what index to use for the next item.

$("#add-another").click(function() {
    form_count ++;

    element = $('<input type="text"/>');
    element.attr('name', 'extra_field_' + form_count);
    $("#forms").append(element);
    // build element and append it to our forms container

    $("[name=extra_field_count]").val(form_count);
    // increment form count so our view knows to populate 
    // that many fields for validation
})
</script>
_
59
Yuji 'Tomita' Tomita

動的フィールドを持つフォームを動的に作成する必要がある場合がありました。私はこのトリックでやったこと：

from Django import forms

...

dyn_form = type('DynForm',  # form name is irrelevant
                (forms.BaseForm,),
                {'base_fields': fields})

詳細については、このリンクを参照してください： Dynamic Forms

しかし、それに加えて、フィールドを挿入する必要がありました。つまり、作成されたフォームクラスにフィールドを動的に追加する必要がありました。

dyn_form.base_fields['field1'] = forms.IntegerField(widget=forms.HiddenInput(), initial=field1_val)
dyn_form.base_fields['field2'] = forms.CharField(widget=forms.HiddenInput(), initial=field2_val)

そしてそれはうまくいきました。

10
Al Conrad

この回答は、@ Yuji'Tomita'Tomitaに基づいており、いくつかの改善と変更が加えられています。

@ Yuji'Tomita'Tomitaの答えは素晴らしく、「Djangoフォームに追加フィールドを追加する」機能を構築するために従うべき方向をうまく簡単に示していますが、コードの一部の問題。

ここでは、@ Yuji'Tomita'Tomitaの最初の提案に基づいて作業コードを提供します。

Views（view.pyファイル内）

ビューの実際の変更はありません：

def myview(request):

  if request.method == 'POST':

    form = MyForm(request.POST, extra=request.POST.get('total_input_fields'))

      if form.is_valid():
        print "valid!"
      else:
        form = MyForm()
return render(request, "template", { 'form': form })

Form（form.pyファイル内）

class MyForm(forms.Form):

    empty_layer_name = forms.CharField(max_length=255, required=True, label="Name of new Layer")

    total_input_fields = forms.CharField(widget=forms.HiddenInput())


    def __init__(self, *args, **kwargs):

      extra_fields = kwargs.pop('extra', 0)

      # check if extra_fields exist. If they don't exist assign 0 to them
      if not extra_fields:
         extra_fields = 0

      super(MyForm, self).__init__(*args, **kwargs)
      self.fields['total_input_fields'].initial = extra_fields

      for index in range(int(extra_fields)):
        # generate extra fields in the number specified via extra_fields
        self.fields['extra_field_{index}'.format(index=index)] = forms.CharField()

テンプレートHTML

<form id="empty-layer-uploader" method="post" enctype="multipart/form-data" action="{% url "layer_create" %}">
        <div id="form_empty_layer">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            {{ form.errors }}
            {{ form.non_field_errors }}
            {% if errormsgs %}
              {% for value in errormsgs %}
                </p>  {{ value }} </p>
              {% endfor %}
            {% endif %}
            {% for error in form_empty_layer.non_field_errors %}
              {{ error }} </br>
            {% endfor %}
            </br>
            {% for field in form_empty_layer.visible_fields %}
              {{ field }} </br>
            {% endfor %}
        </div>
        </br>
        <button type="button" id="add-another">add another</button> </br> </br>
        <button type="submit" id="empty-layer-button" name="emptylayerbtn">Upload</button>
        </br></br>
        // used in order to save the number of added fields (this number will pass to forms.py through the view)
        <input type="text" name="total_input_fields"/>
</form>

テンプレートJquery

// check how many times elements with this name attribute exist: extra_field_*
form_count = $('input[name*="extra_field_*"]').length;

// when the button 'add another' is clicked then create a new input element
$(document.body).on("click", "#add-another",function(e) {
  new_attribute = $('<input type="text"/>');
  // add a name attribute with a corresponding number (form_count)
  new_attribute.attr('name', 'extra_field_' + form_count);
  // append the new element in your html
  $("#form_empty_layer").append(new_attribute);
  // increment the form_count variable
  form_count ++;
  // save the form_count to another input element (you can set this to invisible. This is what you will pass to the form in order to create the Django form fields
  $("[name=total_input_fields]").val(form_count);

})
4
user1919

JavaScriptとフィールドタイプがない方法は、jsで記述されません。

[〜＃〜] python [〜＃〜]

 def __init__(self, *args, **kwargs):
        super(Form, self).__init__(*args, **kwargs)

        ##ajouts des champs pour chaque chien
        for index in range(int(nb_dogs)):
            self.fields.update({
                'dog_%s_name' % index: forms.CharField(label=_('Name'), required=False, max_length=512),
            })

 def fields_dogs(self):
        fields = []
        for index in range(int(nb_dogs)):
            fields.append({
                'name': self['dog_%s_name' % index],
            })
        return fields

[〜＃〜] template [〜＃〜]

{% for field_dog in f.fields_dogs %}
        <thead>
            <tr>
                <th style="background-color: #fff; border-width: 0px;"></th>
                <th>{% trans 'Dog' %} #{{forloop.counter}}</th>
                <th>{% trans 'Name' %}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="background-color: #fff; border-width: 0px;"></td>
                <td style="background-color: #fff; border-width: 0px;"></td>
                <td>{{field_dog.name.errors}}{{field_dog.name}}</td>
            </tr>
            <tr>
                <td style="padding: 10px; border-width: 0px;"></td>
            </tr>
        </tbody>
{% endfor %}
4
Jonathan Le Cornichone

Yuji 'Tomita' Tomitaのソリューションは実際に見つけることができますが、複数ステップのフォームがあり、Django-formtoolsアプリを使用する場合、いくつかの問題があります。 「富田」富田裕二、ありがとうございました:)

forms.py

class LicmodelForm1(forms.Form):
     othercolumsvalue = forms.IntegerField(min_value=0, initial=0)
class LicmodelForm2(forms.Form):
    def __init__(self, *args, **kwargs):
    extra_fields = kwargs.pop('extra', 0)

    super(LicmodelForm2, self).__init__(*args, **kwargs)

    for index in range(int(extra_fields)):
        # generate extra fields in the number specified via extra_fields
        self.fields['othercolums_{index}'.format(index=index)] = \
            forms.CharField()
        self.fields['othercolums_{index}_nullable'.format(index=index)] = \
            forms.BooleanField(required=False)

複数ステップのフォームの場合、余分なフィールドは必要ありません。このコードでは、最初のステップでothercolumsvalueフィールドを使用します。

views.py

class MyFormTool(SessionWizardView):
def get_template_names(self):
    return [TEMPLATES[self.steps.current]]

def get_context_data(self, form, **kwargs):
    context = super(MyFormTool, self).get_context_data(form=form, **kwargs)
    data_step1 = self.get_cleaned_data_for_step('step1')
    if self.steps.current == 'step2':

        #prepare tableparts for the needLists
        needList_counter = 0
        for i in self.wellKnownColums:
            if data_step1[i] is True:
                needList_counter = needList_counter + 1
                pass

        #prepare tableparts for othercolums
        othercolums_count = []
        for i in range(0, data_step1['othercolumsvalue']):
            othercolums_count.append(str(i))

        context.update({'step1': data_step1})
        context.update({'othercolums_count': othercolums_count})

    return context

def get_form(self, step=None, data=None, files=None):
    form = super(MyFormTool, self).get_form(step, data, files)

    if step is None:
        step = self.steps.current

    if step == 'step2':
        data = self.get_cleaned_data_for_step('step1')
        if data['othercolumsvalue'] is not 0:
            form = LicmodelForm2(self.request.POST,
                                 extra=data['othercolumsvalue'])
    return form

def done(self, form_list, **kwargs):
    print('done')
    return render(self.request, 'formtools_done.html', {
        'form_data' : [form.cleaned_data for form in form_list],
        })

get_form（）およびget_context_data（）関数をオーバーライドすることにより、レンダリングされる前にフォームをオーバーライドできます。テンプレートファイルにもJavaScriptは必要ありません。

            {% if step1.othercolumsvalue > 0 %}
            <tr>
                <th>Checkbox</th>
                <th>Columname</th>
            </tr>
            {% for i in othercolums_count %}
                <tr>
                    <td><center><input type="checkbox" name="othercolums_{{ i }}_nullable" id="id_othercolums_{{ i }}_nullable" /></center></td>
                    <td><center><input type="text" name="othercolums_{{ i }}" required id="id_othercolums_{{ i }}" /></center></td>
                </tr>
            {% endfor %}
        {% endif %}

動的に作成されたstep2のフィールドも、同じ名前のためにformtoolsから再調整されました。ただし、そこに到達するには、for-eachテンプレートループを次のように回避する必要があります。

get_context_data（）-functionから

        othercolums_count = []
        for i in range(0, data_step1['othercolumsvalue']):
            othercolums_count.append(str(i))
1
user2823842