Spring MVC: Multiple Row Form Submit

Question

I had a requirement where using Spring MVC we had to take inputs multiple rows of data from user. The form had many rows which user can edit and submit My code look like this.When I tried to display the area list it is null What will be the reason

My view is

 <form  data-th-action="@{/qprmonitorlottery}"  method="POST" >
        <section>
          <div class="panel panel-default" style="margin-top: 15px;"> 
            <!-- Default panel contents -->
            <div class="panel-heading">エリア間補完の有無</div>
            <div class="panel-body">

              <div class="table-responsive">
                <table class="table table-bordered">
                  <tr>
                    <th width="13%" style="background: #FFFFFF; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;" >&nbsp;</th>
                    <th colspan="3" style="text-align: center">都市規模</th>
                  </tr>
                  <tr>
                    <th>エリア </th>
                    <th width="28%">大都市 </th>
                    <th width="29%">中都市</th>
                    <th width="30%">郊外 </th>

                  </tr>

                  <tr data-th-each="qprLottery,stat : ${qprLottery}">
                    <td data-th-text = "${qprLottery.areaName}">北海道 </td>
                    <td> <span style="display: inline-block; width: 80%">
                        <input type="number" data-th-value = "${qprLottery.rate1}" class="form-control" data-th-name="firstRate +${stat.index}" required >
                        <span class="help-block with-errors"></span>
                      </span> <span style="position: relative; top:-10px;" >%</span>  </td>
                    <td>  <span style="display: inline-block; width: 80%">
                        <input type="number" data-th-value = "${qprLottery.rate2}" class="form-control" data-th-name="secondRate +${stat.index}"   required >
                      </span> <span style="position: relative; top:-10px;" >%</span>  </td>
                    <td>  <span style="display: inline-block; width: 80%">
                        <input type="number" data-th-value = "${qprLottery.rate3}"  class="form-control" data-th-name="thirdRate +${stat.index}"  required >
                      </span> <span style="position: relative; top:-10px;" >%</span>  </td>

                  </tr>


                </table>
              </div>

            </div>
          </div>
        </section>

        <div class="row">
          <div align="center" style="padding: 30 0px;">
            <button type="submit"  class="btn btn-primary" value="実行">実行
            </button>
          </div>
        </div>
      </form>

Controller is

     @RequestMapping(value = "/qprmonitorlottery", method = RequestMethod.POST)
      public String setQprMonitorLottery(@Valid @ModelAttribute() MasterCitySizeAreaForm form, BindingResult result) {

        CitySizeByAreaView a = new CitySizeByAreaView();
        System.out.println("Area list" + a.getRate1());
        System.out.println("Area list-------------" + form.getAreaList());

        if (result.hasErrors()) {
          return "new-monitor-lottery";
        }

        return "new-monitor-lottery";
      }

form classes are

public class MasterCitySizeAreaForm {

    private ArrayList<CitySizeAreaForm> areaList;

    public ArrayList<CitySizeAreaForm> getAreaList() {
        return areaList;
    }

    public void setAreaList(ArrayList<CitySizeAreaForm> areaList) {
        this.areaList = areaList;
    }      
}

form class 2

  public class CitySizeAreaForm {

      private int areaId;
      private Integer area;
      private Integer citySize;
      private String areaName;
      private String citySizeName;
      private Float rate1;
      private Float rate2;
      private Float rate3;

      public CitySizeAreaForm() {
      }

      public CitySizeAreaForm(Integer area, String areaName, Float rate1, Float rate2, Float rate3) {
        this.area = area;
        this.areaName = areaName;
        this.rate1 = rate1;
        this.rate2 = rate2;
        this.rate3 = rate3;
      }
    }

Answer 1

replace:

<tr data-th-each="qprLottery,stat : ${qprLottery}"> 

with

<tr data-th-each="qprLottery,stat : ${qprLottery.areaList}">

Answer 2

This link helped me!!!Do try it!!

http://jsltech.blogspot.com/2013/12/how-add-multiple-objects-into-database.html

can use this format for displaying:-

<c:forEach items="${contactForm.contacts}" var="contact" varStatus="status">
        <tr>
            <td>${contact.firstname}</td>
            <td>${contact.lastname}</td>
            <td>${contact.email}</td>
            <td>${contact.phone}</td>
        </tr>
</c:forEach>