forEach + conditionでハマった。

動的フォーム生成が、今ひとつ上手くいかない。
具体的には、こんなHTMLを作ります。

<table border="1" width="700">
  <tbody id="articleElementItems">
    <div id="isTextbox">
      <tr>
        <th width="100"><span id="name-textbox">項目１</span></th>
        <td width="600">
          <input type="text" id="value-textbox" size="60"/>
        </td>
      </tr>
    </div>
    <div id="isTextarea">
      <tr>
        <th width="100"><span id="name-textarea">項目２</span></th>
        <td width="600">
          <textarea id="value-textarea" rows="20" cols="70"></textarea>
        </td>
      </tr>
    </div>
    <div id="isPassword">
      <tr>
        <th width="100"><span id="name-password">項目３</span></th>
        <td width="600">
          <input type="password" id="value-password" size="60"/>
        </td>
      </tr>
    </div>
  </tbody>
</table>

そして、このPageクラスのinitializeで、
articleElementItemsを作成します。

ArticleElementDto[] articleElementItems = new ArticleElementDto[5];

articleElementItems[0] = new ArticleElementDto();
articleElementItems[0].setTextbox(true);
articleElementItems[0].setName("名前");

articleElementItems[1] = new ArticleElementDto();
articleElementItems[1].setTextbox(true);
articleElementItems[1].setName("住所");

articleElementItems[2] = new ArticleElementDto();
articleElementItems[2].setTextarea(true);
articleElementItems[2].setName("コメント");

// 省略

this.setArticleElementItems(articleElementItems);

Pageクラスの他の属性や、DTOの内容は省略しますが、
必要なだけアクセサを記述します。

これで、フォームが動的に変わる入力画面が作成できます。
Tuigwaaライクで、良い感じです。

ただ、そうやって作った入力画面から確認画面へ進むと、
なぜか「最後の行」に入力した値のみ、次の画面に反映されます。
他の行には、何を入力しても、次の画面では空となってしまいました。

その後、トライ＆エラーをしていたら、
「最後の行と同じ入力コンポーネントの値」は、
入力した値が、次の画面に反映されることが分かりました。

具体的に言うと、initializeメソッドをちょっと変えて、

• 1.テキストボックス
• 2.テキストエリア
• 3.パスワード
• 4.テキストボックス

のような画面を動的に生成し、
値を入力すると、1と4の値だけが、確認画面に反映されました。

つまり、
forEach + conditonを組み合わせた場合、以下のように動くようですね。

• forEachの最後の行のconditionが、全ての行の判定に使われる
• conditionがtrueの行に入力した値のみ、反映される

ということで、解決できていません。
forEach + conditionの扱いは、ちょっと厄介ですね。
この辺りは、フレームワーク問わず、ハマる所ではありますが。