百里香不會從輸入中獲取價值

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"] 

當我移動滑塊它改變I值輸入字段，但是當我點擊保存按鈕什麼都沒有發生。如果我從輸入標籤刪除th:field="*{sessionLifespan}"那麼它從形式和sessionLifespan數據庫中保存的數據保存值0

Answer 1

爲了解決最後的問題，改變你這樣的javascript代碼：

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值，你仍然需要使用parseInt。

正如您可能已經注意到的那樣，該問題的原因非常簡單，但仍然很難找到，因爲您沒有注意到在驗證model屬性期間發生了錯誤。爲了防止類似的問題，我建議你要麼記錄任何BindingResult相關的錯誤，要麼使用th:errors屬性在窗體中顯示它們。兩種方式都不能解決問題本身，但他們會提供信息來解決問題。請務必查看this以瞭解有關th:error和表單驗證的更多信息。