Thymoleaf nimmt keinen Wert von Eingabe

Question

Ich habe Probleme mit Wert von Noislider zu sparen.

Hier ist mein Code:

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); 
}); 

Controller

@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; 
    } 

Service

@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; 
    } 

Konverter

@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; 
    } 

Fehler

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

Wenn i Regler verschieben es Wert in i ändern Eingabefeld, aber wenn ich auf Speichern klicke, passiert nichts. Wenn i th:field="*{sessionLifespan}" von Input-Tag entfernen, dann speichern Sie es Daten aus Form und für sessionLifespan in der Datenbank ist es Wert 0.

Answer 1

speichert Um das letzte Problem zu beheben, ändern Sie Ihren JavaScript-Code wie folgt aus:

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); 
}); 

Der obige Code Ruft den Wert aus dem Feld ab, bevor Sie den Schieberegler erstellen, und legen Sie den Anfangswert fest. Ofc müssen Sie immer noch parseInt verwenden, wenn Sie möchten, dass es ein int-Wert ist.

Wie Sie vielleicht bemerkt haben, war die Ursache dieses Problems ziemlich einfach, aber immer noch schwer zu finden, weil Sie nicht bemerkt haben, dass bei der Validierung des Modellattributs ein Fehler aufgetreten ist. Um ähnliche Probleme zu vermeiden, empfehle ich Ihnen, entweder BindingResult zusammenhängende Fehler zu protokollieren oder das Attribut th:errors zu verwenden, um sie im Formular anzuzeigen. Beide Wege werden das Problem selbst nicht beheben, aber sie werden die Informationen liefern, um es zu beheben. Stellen Sie sicher, dass Sie this überprüfen, um mehr über th:error und Formularvalidierung im Allgemeinen zu erfahren.