Using a Thymeleaf form to construct POST request - forms

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 & 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.