Form Page で複数行テキストなどが表示されない件（１）

Starter Kit で Form Page を作成したところ、Form fields の「フィールド種別」で「複数行テキスト」を指定すると何も表示されないという現象に遭遇しました。

HTMLの内容を確認すると、

という具合に、中身のないDIV要素としてレンダリングされていて、「フィールド種別」を「一行テキスト」に変更すると、

という感じで期待通りに表示されます。

色々と調べてみた結果、templates/components/form-field.html の処理が原因であることがわかりました。

field_type には、テンプレートの先頭で field.field.widget.input_type の値が代入されており、「フィールド種別」の選択と field_type の値の関係は

一行テキスト　→　'text'
複数行テキスト　→　''（空文字列）
Eメール　→　'email'
数値　→　'number'
URL　→　'url'
チェックボックス　→　'checkbox'
複数のチェックボックス　→　'checkbox'
セレクトボックス　→　'select'
複数セレクター　→　'select'
ラジオボタン　→　'radio'
日付　→　'text'
日時　→　'text'
非表示フィールド　→　'hidden'

という関係になっています。

そして'', 'email', 'url' に合致する条件文がないため、「複数行テキスト」、「数値」、「URL」を選択した場合に何も表示されないようです。

また、識別文字列が重複しているため、一部の「フィールド種別」が区別できない状態になっています。

なにか良い方法がないかと調べていたところ、field.widget_type の値を採用すると、

一行テキスト　→　'text'
複数行テキスト　→　'textarea'
Eメール　→ 'email'
数値　→ 'number'
URL　→ 'url'
チェックボックス　→　'checkbox'
複数のチェックボックス　→ 'checkboxselectmultiple'
セレクトボックス　→ 'select'
複数セレクター　→ 'selectmultiple'
ラジオボタン　→ 'radioselect'
日付　→　'date'
日時　→ 'datetime'
非表示フィールド　→　'hidden'

という具合に、うまく振り分けができそうです。

Django なので、単純に {{ field }} としても良いのかなとも思いますが、せっかくなので条件分岐を追加していく形で進めてみたいと思います。（デザインを維持するための CSS の指定が面倒くさそうなので断念したというの本当のところで(^.^; ）

見たところ "text", "email", "number", "url", "date", "datetime", "checkbox", "hidden" は共通の処理で大丈夫そうなのでまとめます。<input> の type 属性も "datetime" を除いて field_type の値をそのまま使えそうです。"datetime" だけは<input> の type 属性として廃止？されて使えないようなので "datetime-local" に置き換えます。

同様に "textarea", "checkboxselectmultiple", "radioselect", "select", "selectmultiple" の処理を追加します。

最終的な全文を記載しておきます。

また、スタイルの指定共通部分など一部を main.scss に移しました。