wtformsを使用して入力フィールドを動的に追加する

ムタン

この問題にどのようにアプローチするかはよくわかりません。私はそこに着くといいのですが。

たとえば、ページにアドレスでいっぱいのテーブルがあります。これらのカウントは動的です(5または10またはその他のカウントである可能性があります)。そして、1ページで編集できるようにしたいと思います。

私のアプローチは、編集一つのアドレスにwtformsでフォームを作成し、Jinja2の中でそれを乗算したfor loopHTML形式のpropertysへとAPPENDname私はとき、手動でデータの各行を抽出し、自分の形に戻ってそれを置くことができるので、itereationから評価したいです。idloop.index0

したがって、この例のフォームは次のようになります。

class AdressForm(Form):
    name = TextField()

これで、テンプレートのアプローチは次のようになります(1つの入力フィールドに分解します)。

{% for address in addresses %}
    {{ forms.render_field(addressform.name, id = "name_" ~ loop.index0, 
                          name = "name_" ~ loop.index0, value = address.name) }}
{% endfor %}

(forms.render_fieldは、多くのチュートリアルで使用されているように、wtformsのフィールド関数に適切なクラスを指定するための単なるマクロです)

wtformsは最初のフォームの変数名からhtml- nameparamterを作成するため、パラメーターをフィールド関数に手動で渡すことができないため、これは機能しませんname

レンダリングしたいフォームの名前にプレフィックスまたはポストフィックスを追加する方法はありますか?それとも、これはXYの問題であり、私のアプローチは完全に間違っています。

または私はそれをすべて自分で明白にしますか(私は本当にこれを避けようとします)

ショーン・ビエイラ

WTFormsには、と呼ばれるメタフィールドとFormField呼ばれる別のメタフィールドがありFieldListます。これら2つを組み合わせると、必要なものが得られます。

class AddressEntryForm(FlaskForm):
    name = StringField()

class AddressesForm(FlaskForm):
    """A form for one or more addresses"""
    addresses = FieldList(FormField(AddressEntryForm), min_entries=1)

AddressesFormにエントリを作成するには、辞書のリストを使用するだけです。

user_addresses = [{"name": "First Address"},
                  {"name": "Second Address"}]
form = AddressesForm(addresses=user_addresses)
return render_template("edit.html", form=form)

次に、テンプレートで、サブフォームをループします。

{% from 'your_form_template.jinja' import forms %}
{% for address_entry_form in form.addresses %}
    {{ address_entry_form.hidden_tag() }}
    {# Flask-WTF needs `hidden_tag()` so CSRF works for each form #}
    {{ forms.render_field(address_entry_form.name) }}
{% endfor %}

WTFormsは自動的に名前とIDに正しくプレフィックスを付けるため、データをポストバックするform.addresses.dataと、更新されたデータを含む辞書のリストを取得して取得することができます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

入力フィールドを使用して複数の<tr>を動的に追加および削除する方法

分類Dev

jqueryを使用して入力フィールドにcssを追加する

分類Dev

javascriptを使用して入力フィールドに値を追加する

分類Dev

PowerShellを使用してActiveDirectoryhashedPasswordフィールドに自動的に入力する方法

分類Dev

PowerShellを使用してActiveDirectoryhashedPasswordフィールドに自動的に入力する方法

分類Dev

入力フィールド値jQueryを動的に追加します

分類Dev

入力フィールドを動的に追加する

分類Dev

入力フィールドを動的に追加するJquery

分類Dev

JQueryは、動的に追加された入力フィールドを他の動的に追加された入力フィールドに対して検証します

分類Dev

Puppeteerを使用して入力フィールドに入力する方法は?

分類Dev

jqueryを使用して追加するたびにフィールド入力をsessionStorageに保存します

分類Dev

CSSを使用して、入力を形成するために「必須フィールド」アスタリスクを自動的に追加します

分類Dev

jqueryを使用して動的に追加/削除フィールドに自動入力を行う方法は?

分類Dev

純粋なHTMLとCSSを使用して入力フィールド内にラベルを追加する方法

分類Dev

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

分類Dev

Flask-jQueryを使用して次のフォームフィールドに移動するWTForms

分類Dev

カピバラを使用して動的フォームフィールドに入力する方法

分類Dev

UnboundFieldを返すWTFormsにフィールドを動的に追加する

分類Dev

UnboundFieldを返すWTFormsにフィールドを動的に追加する

分類Dev

SQL を使用して不足しているフィールドに入力する

分類Dev

materializecssを使用して入力フィールドにクリアアイコンを追加する方法

分類Dev

materializecssを使用して入力フィールドにクリアアイコンを追加する方法

分類Dev

PHPを使用して複数の入力テキストフィールド値をdbに追加する方法

分類Dev

ノックアウトを使用してボタンの後に入力フィールドを追加する

分類Dev

フォーム入力フィールドを動的に追加する

分類Dev

reactjsを使用して入力フィールドのペアを動的に生成する方法

分類Dev

動的@idを使用して入力フィールドにテキストを送信する方法

分類Dev

動的@idを使用して入力フィールドにテキストを送信する方法

分類Dev

入力テキストフィールドを使用して、Javascriptで関数の値を動的に変更する

Related 関連記事

  1. 1

    入力フィールドを使用して複数の<tr>を動的に追加および削除する方法

  2. 2

    jqueryを使用して入力フィールドにcssを追加する

  3. 3

    javascriptを使用して入力フィールドに値を追加する

  4. 4

    PowerShellを使用してActiveDirectoryhashedPasswordフィールドに自動的に入力する方法

  5. 5

    PowerShellを使用してActiveDirectoryhashedPasswordフィールドに自動的に入力する方法

  6. 6

    入力フィールド値jQueryを動的に追加します

  7. 7

    入力フィールドを動的に追加する

  8. 8

    入力フィールドを動的に追加するJquery

  9. 9

    JQueryは、動的に追加された入力フィールドを他の動的に追加された入力フィールドに対して検証します

  10. 10

    Puppeteerを使用して入力フィールドに入力する方法は?

  11. 11

    jqueryを使用して追加するたびにフィールド入力をsessionStorageに保存します

  12. 12

    CSSを使用して、入力を形成するために「必須フィールド」アスタリスクを自動的に追加します

  13. 13

    jqueryを使用して動的に追加/削除フィールドに自動入力を行う方法は?

  14. 14

    純粋なHTMLとCSSを使用して入力フィールド内にラベルを追加する方法

  15. 15

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

  16. 16

    Flask-jQueryを使用して次のフォームフィールドに移動するWTForms

  17. 17

    カピバラを使用して動的フォームフィールドに入力する方法

  18. 18

    UnboundFieldを返すWTFormsにフィールドを動的に追加する

  19. 19

    UnboundFieldを返すWTFormsにフィールドを動的に追加する

  20. 20

    SQL を使用して不足しているフィールドに入力する

  21. 21

    materializecssを使用して入力フィールドにクリアアイコンを追加する方法

  22. 22

    materializecssを使用して入力フィールドにクリアアイコンを追加する方法

  23. 23

    PHPを使用して複数の入力テキストフィールド値をdbに追加する方法

  24. 24

    ノックアウトを使用してボタンの後に入力フィールドを追加する

  25. 25

    フォーム入力フィールドを動的に追加する

  26. 26

    reactjsを使用して入力フィールドのペアを動的に生成する方法

  27. 27

    動的@idを使用して入力フィールドにテキストを送信する方法

  28. 28

    動的@idを使用して入力フィールドにテキストを送信する方法

  29. 29

    入力テキストフィールドを使用して、Javascriptで関数の値を動的に変更する

ホットタグ

アーカイブ