0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WTFormsで複数チェックボックスを表示する方法

Posted at

Flaskでマイクロサービス作って使ってます(自分用)
複数選択可のCheckboxを作るのに躓いたので情報共有

環境(関係しそうなモノのみ)

Flask:3.0.1
Flask-WTF:1.2.1
WTForms:3.1.2
WTForms-Components:0.10.5 <--意図的に入れた覚えがないので多分依存関係

やりたい事

あなたが使えるのは?

  • フライス盤
  • 旋盤

みたいな複数回答可なチェックボックスをWTFormsで生成したかった.

やりかた

作るだけならこちらを参考にすればできます.

multiCheckbox.py
class MultiCheckboxField(SelectMultipleField):
    widget = widgets.ListWidget(html_tag='ol', prefix_label=False)
    option_widget = widgets.CheckboxInput()
class RegistrationForm(FlaskForm):
    language = MultiCheckboxField('Language', choices=get_languages())

(元ネタではValidatorも実装しているのですが,ここでは割愛)
選択肢の追加も[form名].choicesに足していけばいいので,selectFieldと同じです.

問題

最初から✓状態で表示したい
SelectFieldの場合は選択状態にしたいvalueを[formオブジェクト].[form名].defaultに設定すればいいのですが,

SelectFieldの場合
class myform(FlaskForm):
  selectForm=SelectField()

choices=[('milling','フライス盤'),('Lathe','旋盤'),('grinding','研削盤')]

form=myform()
form.selectForm.choices=choices #選択肢を追加
form.selectForm.default='Lathe' #初期選択状態を設定
form.process([])

複数の場合は???となりググるとこちらの様に
[form名].dataに選択状態にしたい選択肢のリストを設定すればよいとあり,

MultipleCheckBoxの場合
class myform(FlaskForm):
  selectForm=MultiCheckboxField()

choices=[('milling','フライス盤'),('Lathe','旋盤'),('grinding','研削盤')]
selected=['milling','Lathe']

form=myform()
form.selectForm.choices=choices #選択肢を追加
form.selectForm.data=selected #初期選択状態を設定
form.process([])

やってみたのですが,選択状態が反映されません
そもそもdataプロパティって送信されたフォームの内容を取得するときに使うよなと思いながらさらに調べたら

解決策

process([])メソッドの順番変えたら動きました

修正箇所抜粋
form.selectForm.choices=choices #選択肢を追加
form.process([])
form.selectForm.data=selected #初期選択状態を設定

process([])メソッド,dataプロパティをクリアしちゃうみたいです

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?