Using a Thymeleaf form to construct POST request

Question

I'm having trouble passing form input to an attribute of a nested object (object.subobject.property). Specifically I have an Institution institution object which contains a Country country object which has an attribute called countryName, accessed like institution.country.getCountryName() but I cannot get the Model to populated correctly upon form submission. Below I have three print statements during the @PostMapping. That output looks like:

Institution(instId=398, instName=Alfred Wegener Institute for Polar and Marine Research, abbrvName=AWI, country=null, action=finish institution edit)
{modelinstitution=Institution(instId=398, instName=Alfred Wegener Institute for Polar and Marine Research, abbrvName=AWI, country=null, action=finish institution edit), org.springframework.validation.BindingResult.modelinstitution=org.springframework.validation.BeanPropertyBindingResult: 0 errors}
org.springframework.validation.BeanPropertyBindingResult: 0 errors

Notice how the values for country= are null in both the Model and the institutionAttributes object. I was expecting something more like

country=Country(countryName=United States, countryId=12, parentCountry=)

Why is the form not populating the Country object and how can I make it do so?

I have a form:

<form id="lead_form" data-toggle="validator" th:action="@{/institutions}" th:object="${institution}" method="post" enctype="application/x-www-form-urlencoded">
    <input type="hidden" id="action" name="action" value="finish institution edit"/>
    <input type="hidden" id="instId" name="instId" th:value="${institution.instId}"/>

    <div class="row">
        <div class="col-md-2 text-left">
            <label for="instIdDisplay" class="control-label">Institution ID: </label>
            <input class="form-control border-input" th:value="${institution.instId}" id="instIdDisplay" name="instIdDisplay" type="number" disabled="true"/>
        </div>
        <div class="col-md-5 text-left">
            <label for="instName" class="control-label">Institution Name: </label>
            <input class="form-control border-input" th:value="${institution.instName}" placeholder="Required" id="instName" name="instName" type="text" required="true"/>
        </div>
        <div class="col-md-2 text-left">
            <label for="abbrvName" class="control-label">Abbreviation: </label>
            <input class="form-control border-input" th:value="${institution.abbrvName}" placeholder="Optional" id="abbrvName" name="abbrvName" type="text"/>
        </div>
        <div class="col-md-3 text-left">
            <label for="countryName" class="control-label">Country: </label>
            <input class="form-control border-input" th:value="${institution.country.countryName}" placeholder="Required" id="countryName" name="countryName" type="text"/>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-4" align="left">
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Save &amp; Close</button>
        </div>
        <div class="col-md-4"/>
        <div class="col-md-4" align="right">
        <!--<input id="form_button" class="btn btn-lg btn-success" type="submit" value="Save And Close"/>-->
            <a th:href="@{/institutions}" class="btn btn-lg btn-danger">Cancel</a>
        </div>
    </div>
</form>

which issues a POST request from the controller:

@PostMapping(value = "")
String institutionsEditPOST(
        @ModelAttribute("modelinstitution") Institution institutionAttributes, 
        Model model, 
        BindingResult result) {
    System.out.println(institutionAttributes);
    System.out.println(model);
    System.out.println(result);
    String newAction;
    String action = institutionAttributes.getAction();

    System.out.println("ENTER INSTITUTION POST BEFORE ACTION: "+action);

    String instName = institutionAttributes.getInstName();
    String abbrvName = institutionAttributes.getAbbrvName();
    String countryName = institutionAttributes.getCountry().getCountryName();

    model.addAttribute("instName", instName);
    model.addAttribute("abbrvName", abbrvName);
    model.addAttribute("countryName", countryName);

    newAction = "institutions";

    return "forms/fragments/"+newAction;
}

Answer 1

Why your code is not working: You have name="countryName" but the countryName is not property of institution, but of country. You must provide path to the property: name="country.countryName". But instead I suggest to use the convenient th:field.

Try this:

<input class="form-control border-input" th:field="*{country.countryName}" placeholder="Required" id="countryName" type="text"/>

It should properly set both name and value attributes (and also id). It normally saves you from specifying (Thymeleaf) attributes for these individually.

The th:field value must a selection expression (*) relative to the object specified in th:object.