Thymeleafは入力から値を取らない

Question

nouisliderから値を保存することに問題があります。ここで

は私のコードは次のとおりです。

HTML

<form id="campaignForm" th:object="${campaignForm}" method="post" class="form-horizontal"> 
    <input type="hidden" th:field="*{id}" /> 
    <div class="form-group"> 
     <label class="col-sm-3 control-label">Session lifespan (hours): </label> 
      <div class="col-sm-7"> 
       <div id="basic_slider" th:field="*{sessionLifespan}">         
       </div> 
      </div> 
      <div class="col-sm-2"> 
       <input class="form-control" id="basic_slider_value" th:value="*{sessionLifespan}"/> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-sm-6"> 
       <div class="form-group"> 
        <div class="col-sm-9 col-sm-offset-3"> 
         <button class="btn btn-primary" type="submit">Save</button>             
         <a class="btn btn-white" th:href="@{/campaigns}">Cancel</a>             
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 

JS

var basic_slider = document.getElementById('basic_slider'); 

noUiSlider.create(basic_slider, { 
    start: 0, 
    step: 1, 
    behaviour: 'tap', 
    connect: 'upper', 
    range: { 
     'min': 0, 
     'max': 30 
    } 
}); 

var basicSliderValue = document.getElementById('basic_slider_value'); 

basic_slider.noUiSlider.on('update', function(values, handle) { 
    basicSliderValue.value = values[handle]; 
}); 

basicSliderValue.addEventListener('change', function(){ 
    basic_slider.noUiSlider.set(this.value); 
}); 

コントローラ

@GetMapping 
    public String newCampaign(@RequestParam(value = "appId", required = false) Integer appId, Model model) { 

     CampaignResource campaign = new CampaignResource(); 
     if (appId != null) { 
      App app = appService.getApp(appId); 
      AppResource res = appConverter.convert(app); 
      campaign.setApp(res); 
     } 
     return showPage(campaign, model); 
    } 

    protected String showPage(CampaignResource campaign, Model model) { 

     model.addAttribute("campaignForm", campaign); 
     model.addAttribute("appList", campaignService.getApps()); 
     model.addAttribute("publisherList", campaignService.getPublishers()); 
     model.addAttribute("sourceList", campaignService.getSources()); 
     return "campaigns/campaign-edit"; 
    } 


    @PostMapping 
    public String createCampaign(@ModelAttribute("campaignForm") @Validated CampaignResource resource, BindingResult result, Model model) { 
     if (result.hasErrors()) { 
      return showPage(resource, model); 
     } 

     return saveCampaign(0, resource); 
    } 

    @GetMapping("/{campaignId}") 
    public String editCampaign(@PathVariable int campaignId, Model model) { 

     Campaign campaign = campaignService.getCampaign(campaignId); 
     CampaignResource res = campaignConverter.convert(campaign); 

     return showPage(res, model); 
    } 


    @PostMapping("/{campaignId}") 
    public String updateCampaign(@PathVariable int campaignId, @ModelAttribute("campaignForm") @Validated CampaignResource resource, BindingResult result, Model model) { 
     if (result.hasErrors()) { 
      return showPage(resource, model); 
     } 
     return saveCampaign(campaignId, resource); 
    } 

    protected String saveCampaign(int campaignId, CampaignResource resource) { 
     Campaign campaign = populateCampaign(campaignId, resource); 
     int appId = getAppId(resource); 
     int publisherId = getPublisherId(resource); 
     int sourceId = getSourceId(resource); 

     if (campaignId == 0) { 
      campaignService.createCampaign(campaign, appId, publisherId, sourceId); 
     } else { 
      campaignService.updateCampaign(campaign, appId, publisherId, sourceId); 
     } 

     return "redirect:/campaigns"; 
    } 

    protected Campaign populateCampaign(int campaignId, CampaignResource resource) { 
     Campaign campaign = null; 
     if (campaignId == 0) { 
      campaign = new Campaign(); 
      campaign.setTimeAdded(new Date()); 
     } else { 
      campaign = campaignService.getCampaign(campaignId); 
     } 

     campaign.setCampaignName(resource.getCampaignName()); 
     campaign.setDescription(resource.getDescription()); 
     campaign.setStatus(resource.isStatus() ? UserEnums.StatusCampaign.ACTIVE : UserEnums.StatusCampaign.INACTIVE); 
     campaign.setSessionLifespan(resource.getSessionLifespan()); 

     return campaign; 
    } 

サービス

@Transactional 
    public Campaign createCampaign(Campaign campaign, int appId, int publisherId, int sourceId) { 

     App app = appRepository.findOne(appId); 
     campaign.setApp(app); 

     Publisher publisher = publisherRepository.findOne(publisherId); 
     campaign.setPublisher(publisher); 

     Source source = sourceRepository.findOne(sourceId); 
     campaign.setSource(source); 

     campaign = campaignRepository.save(campaign); 
     return campaign; 
    } 

    @Transactional 
    public Campaign updateCampaign(Campaign campaign, int appId, int publisherId, int sourceId) { 

     campaign.setApp(appRepository.findOne(appId)); 
     campaign.setPublisher(publisherRepository.findOne(publisherId)); 
     campaign.setSource(sourceRepository.findOne(sourceId)); 
     campaign = campaignRepository.save(campaign); 

     return campaign; 
    } 

コンバータ

@Override 
    public CampaignResource convert(Campaign campaign) { 

     CampaignResource resource = new CampaignResource(); 

     resource.setId(campaign.getId()); 
     resource.setCampaignName(campaign.getCampaignName()); 
     resource.setDescription(campaign.getDescription()); 
     resource.setStatus(campaign.getStatus() == StatusCampaign.ACTIVE); 
     resource.setSessionLifespan(campaign.getSessionLifespan()); 

     if(campaign.getApp() != null) { 
      resource.setApp(appConverter.convert(campaign.getApp())); 
     } 

     if(campaign.getPublisher() != null) { 
      resource.setPublisher(publisherConverter.convert(campaign.getPublisher())); 
     } 

     if(campaign.getSource() != null) { 
      resource.setSource(sourceConverter.convert(campaign.getSource())); 
     } 

     return resource; 
    } 

エラー

org.springframework.validation.BeanPropertyBindingResult: 1 errors 
Field error in object 'campaignForm' on field 'sessionLifespan': rejected value [7.00]; codes [typeMismatch.campaignForm.sessionLifespan,typeMismatch.sessionLifespan,typeMismatch.int,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [campaignForm.sessionLifespan,sessionLifespan]; arguments []; default message [sessionLifespan]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'int' for property 'sessionLifespan'; nested exception is java.lang.NumberFormatException: For input string: "7.00"] 

私はスライダーを動かすと、それは私の値を変更フィールドを入力しますが、保存ボタンをクリックしても何も起こりません。私はinputタグからth:field="*{sessionLifespan}"を削除した場合、それは、データベース内のフォームからのデータを保存し、sessionLifespanため、このようなあなたのjavascriptのコード変更、最後の問題に対処するために値が0

Answer 1

を保存：

var basic_slider = document.getElementById('basic_slider'); 
var basicSliderValue = document.getElementById('basic_slider_value'); 

noUiSlider.create(basic_slider, { 
    start: basicSliderValue.value, 
    step: 1, 
    behaviour: 'tap', 
    connect: 'upper', 
    range: { 
     'min': 0, 
     'max': 30 
    } 
}); 

basic_slider.noUiSlider.on('update', function(values, handle) { 
    basicSliderValue.value = values[handle]; 
}); 

basicSliderValue.addEventListener('change', function(){ 
    basic_slider.noUiSlider.set(this.value); 
}); 

上記のコードをスライダを作成する前にフィールドから値を取得し、初期値を設定します。あなたがそれをint値にしたい場合は、OfcでもparseIntを使用する必要があります。

この問題の原因は非常にシンプルですが、モデル属性の検証中にエラーが発生したことに気付かなかったため、見つけにくいことに気づいたでしょう。同様の問題を防ぐため、BindingResultに関連するエラーを記録するか、th:errors属性を使用してフォームに表示することをお勧めします。どちらの方法でも問題は解決されませんが、問題を解決するための情報が提供されます。 th:errorとフォーム検証の一般的な詳細については、thisを確認してください。