WTFormsの操作FieldList

Question

FlaskでWTFormsを使用します.Flask.WTF拡張子を使用します。しかし、この質問はフラスコ特有のものではありません。

WTFormsには、FieldList field for lists of fieldsが含まれています。私はこれを使用して、ユーザーがアイテムを追加または削除できるフォームを作成したいと考えています。これには、ウィジェットを動的に追加するためのAjaxフレームワークが必要ですが、WTFormsのドキュメントではそのことについて言及していません。

Deform come with Ajax supportのような他のフレームワーク。 WTFormsにも同様のフレームワークがありますか？

Answer 1

私はより多くの項目を追加できるように、私のFieldList /フォームフィールドを使用してこのようなものを使用：

$(document).ready(function() { 
    $('#add_another_button').click(function() { 
     clone_field_list('fieldset:last'); 
    }); 
}); 

function clone_field_list(selector) { 
    var new_element = $(selector).clone(true); 
    var elem_id = new_element.find(':input')[0].id; 
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1; 
    new_element.find(':input').each(function() { 
     var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked'); 
    }); 
    new_element.find('label').each(function() { 
     var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-'); 
     $(this).attr('for', new_for); 
    }); 
    $(selector).after(new_element); 
} 

ボタンを削除するには、かなりトリッキーになります。

（コードはほとんどの回答からDynamically adding a form to a Django formset with Ajaxに借りた。）

Answer 2

あなたの説明から、Ajaxが特に必要な理由はわかりませんが、もちろん行を追加/削除するにはJavaScriptロジックが必要です。私はWTFormsを使ってこの機能を実装しましたが、WTForms自体からの特別なサポートはありませんでした。クライアント側のウィジェットを作成するときに、WTFormsがサーバー側のリストに正しく解析するフィールド名を使用してこれを行う必要があります。クライアント側JavaScriptを使用して既存の行を複製して行を追加すると、クライアント側で作成されたサーバー側と行が生成された行全体で行のレンダリングが一貫します。