I am working with Java ArrayList and thymeleaf. I need to use the list in thymeleaf for adding value dynamically. I don't understand how to do that?
Model
public class MedicineDTO {
private Long brandId;
private Long stockId;
private double quantity;
private double discount;
private double total;
}
public class InvoiceDTO {
private String customerName;
private String mobileNumber;
private List<MedicineDTO> medicineDTOList;
private double averageDiscount;
private double totalDiscount;
private double grandTotal;
}
Controller
#RequestMapping(value = "/pos")
public String getPOS(Model model) {
List<Brand> brandList = brandService.getAllBrands();
List<MedicineDTO> medicineDTOList = new ArrayList<>();
InvoiceDTO invoiceDTO = new InvoiceDTO();
invoiceDTO.setMedicineDTOList(medicineDTOList);
model.addAttribute("medicinedto", new MedicineDTO());
model.addAttribute("invoicedto", invoiceDTO);
model.addAttribute("brands", brandList);
return "pos";
}
#PostMapping(value="/pos/payment")
public String makePayment(InvoiceDTO invoiceDTO){
System.out.println(invoiceDTO);
service.makePayment(invoiceDTO);
return "invoice/invoice";
}
pos.html
<form id="posForm" th:action="#{/pos/payment}" th:object="${invoicedto}" method="post">
<div class="card-body">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="name">Customer Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="name"
th:field="*{customerName}"
placeholder="Enter Customer Name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="mobile">Mobile No</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="mobile"
th:field="*{mobileNumber}"
placeholder="Enter Mobile Number">
</div>
</div>
<div class="col-sm-4 col-md-2">
<button type="button" class="btn btn-success btn-sm add-row">
Add
</button>
<button type="reset" class="btn btn-primary btn-sm">
Reset
</button>
</div>
<table class="table" id="brand_tbl">
<thead>
<tr>
<th>Brand Name</th>
<th>Expired Date</th>
<th>Stock</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:object="${medicinedto}">
<td>
<select id="selectBrand1" class="form-control select2"
th:field="*{brandId}"
onchange="changeBrand(this);"
style="width: 100%;">
<option value=""> --</option>
<option th:each="brand : ${brands}"
th:value="${brand.id}"
th:utext="${brand.name}">
</select>
</td>
<td style="width:15%">
<select id="selectDate1" class="form-control select2"
onchange="changeDate(this);"
style="width: 100%;">
<option value=""> --</option>
</select>
</td>
<td style="width:10%">
<input type="number" class="form-control" id="stock1"
placeholder="" disabled>
<input type="hidden" id="stockId1" th:field="*{stockId}">
</td>
<td style="width:10%">
<input type="number" class="form-control" id="quantity1"
th:field="*{quantity}"
onchange="changeQuantity(this);"
placeholder="">
</td>
<td style="width:12%">
<input type="number" class="form-control" id="price1"
placeholder="" disabled>
</td>
<td style="width:12%">
<input type="number" class="form-control" id="discount1"
onchange="changeDiscount(this);"
placeholder="0">
<input type="hidden" id="discountAmount1" th:field="*{discount}">
</td>
<td style="width:12%">
<input type="number" class="form-control" id="total1"
th:field="*{discount}"
placeholder="" readonly>
</td>
<td>
<button type="button"
class="btn btn-block btn-danger btn-sm delete-row">
Delete
</button>
</td>
<div th:text="${invoicedto.medicineDTOList.add(medicinedto)}" th:remove="all"></div>
</tr>
</tbody>
</table>
</br>
</br>
</br>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="average_discount">
Average Discount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="average_discount"
th:field="*{averageDiscount}"
onchange="changeAverageDiscount();">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label justify-content-end" for="total_discount">
Total Discount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="total_discount"
th:field="*{totalDiscount}"
readonly>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="vat">
Vat
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="vat" disabled>
</div>
<div class="col-sm-1">
<input type="checkbox" id="vat_checkbox" name="vat_checkbox">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="tax">
Tax
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="tax" disabled>
</div>
<div class="col-sm-1">
<input type="checkbox" id="tax_checkbox" name="tax_checkbox">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="total_tax">
Total Tax
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="total_tax" disabled>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="grand_total">
Grand Total
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="grand_total"
th:field="*{grandTotal}"
readonly>
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="paid_amount">
Paid Amount
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="paid_amount"
onchange="changePaidAmount();">
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group row justify-content-end">
<label class="col-sm-2 col-form-label" for="change">
Change
</label>
<div class="col-sm-2">
<input type="number" class="form-control" id="change" disabled>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I am trying to add list value in thymeleaf frontend this way. I am passing two object from controller to html. And i am using <div th:text="${invoicedto.medicineDTOList.add(medicinedto)}" th:remove="all"></div> for adding medicindto object. But It passes null list to controller. Do you have any idea how i solve my problem? thanks in advance.
Thymeleaf is used to process HTML templates, add data to it, do some checks such as th:if, th:unless and also loops through an array of objects using th:each etc. But all of this is done on the server side. Once the HTML template has been delivered to the client (the browser in this case), thymeleaf is not applicable there.
So on the client side, you have to rely on HTML and JavaScript to get everything done, including preparing your data to be submitted in the form.
Based on the explanation above, you can do some more research on how to handle list on html forms. I found this solution to be appropriate for your use case, you can study it and use it.
He has used Ratings[' + rating + '][Value] in his solution, you will use something like medicineDTOList[' + index + '][brandId]. Why medicineDTOList? because in InvoiceDto which is your form's th:object, the list of MedicineDto is called medicineDTOList.
The [index] refers to the array index, which will correspond to the position of the MedicineDto in your arraylist and [brandId] correspond to the property of the MedicineDto at that index.
Upon submitting the form, java will parse the form's data into your "DTO" which is InvoiceDTO.
Related
I am trying to save an image inserted by an <input> field in a form by the user to a folder named imgs under the WEB-INF folder and store in the table column of the product the path of that photo so i can later display them in a products page for my online shop.
I don't know how to send the image to the java file (using jdbc server) so i can save it and also how i can save it. I have researched online but I have not fount what i am looking for. Below is my .jsp file.
<body>
<%
if(request.getParameter("btn") != null){
String name = request.getParameter("name");
String description = request.getParameter("description");
double price = Double.valueOf( request.getParameter("price"));
String brand = request.getParameter("brand");
String type = request.getParameter("type");
int quantity = Integer.parseInt( request.getParameter("quantity"));
File picture =
Client client = Client.create();
WebResource webResource =client.resource("...link.../"+name+"/"+description+"/"+price+"/"+brand+"/"+type+"/"+quantity+"/"+picture);
ClientResponse myresponse = webResource.accept("text/plain").get(ClientResponse.class);
}
%>
<div class="p-5" >
<h1 id="title" class="d-flex justify-content-center" style="font-size:4rem;">Edit your Profile</h1>
<form class="container " method="post">
<div class="form-row">
<div class="form-group col-6">
<label for="name">Product name:</label>
<input class="form-control" type="text" name="name"><br>
</div >
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="description">Description:</label>
<textarea class="form-control" name="description" cols="40" rows="5"></textarea><br>
</div >
</div>
<div class="form-row">
<div class="form-group col-3">
<label for="price">Price:</label>
<input class="form-control" type="number" name="price"><br>
</div >
<div class="form-group col-6">
<label for="brand">Product brand:</label>
<input class="form-control" type="text" name="brand"><br>
</div >
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="type">Product type(running, walking, casual ,etc...):</label>
<input class="form-control" type="text" name="type"><br>
</div >
<div class="form-group col-6">
<label for="quantity">Available quantity:</label>
<input class="form-control" type="text" name="quantity"><br>
</div >
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="picture">Product picture:</label>
<input class="form-control" type="file" name="picture"><br>
</div >
</div>
<button type="submit" name="btn">Sign in</button>
</form>
</div>
</body>
i have 2 entity class, parkingUser and parkingDetails, user can have many parking details(one to many).
parkingUserobject contain: [id, firstName, lastName,parkingDetails[id, entryDate,...,user_id(FK)]]
in parkingUser i had List of parkingDetails(its my FK)
#OneToMany(mappedBy = "parkingUsers", cascade = CascadeType.ALL, orphanRemoval = true)
private List<parkingDetails> parkingDetails = new ArrayList<parkingDetails>();
so now i have a thymeleaf page that recive from controller model of user and model of parking, its showing exist data on form input fields, and adding more data of exit date and exit time on the object in the c'tor on the controller that recive the form.
after that what i want to achive is to get the id of parking.id,
but its send me from a form the id of user.id
my controller with prints to understood what i get from the form:
(lets say i enter to form on user id =1, its create on the controoler new object of parkingDetails, and save it on db,
after that i want to delete the new object that created with id 35, and the object that pass from the form of parking.id, but i cant access this data.
#PostMapping("/saveDateAndTimeOfExitParking")
public String saveNewUserFromFormAction(
#ModelAttribute("user") parkingUsers parkingUsers,
#ModelAttribute("details") parkingDetails parkingDetails) {
//need to store to details table date and time
String str = LocalTime.now().format(DateTimeFormatter.ofPattern("HH:mm:ss"));
System.out.println(parkingUsers);
//parkingUsers [id=1, firstName=David, lastName=Adams, license=2356584, parkingDetails=[]]
System.out.println(parkingDetails);
//parkingDetails [id=1, entryDate=2022-05-18, entryTime=08:35:20, exitDate=null, exitTime=null, parkingUsers=null]
System.out.println(parkingUsers.getParkingDetails());
//[]
parkingDetails d = new parkingDetails(
parkingDetails.getEntryDate(),
parkingDetails.getEntryTime(),
LocalDate.now(),
str);
d.setParkingUsers(parkingUsers);
parkingDetailsService.saveParkingUser(d);
//store the object of parking details on new db of history
//and then remove it from main schema
System.out.println(d.getId());
//35
System.out.println(parkingDetails.getId());
//1
parkingDetailsService.deleteParkingEntrySession(d.getId());
//i want to delete also the parkingDetails object from the form, but its gave me the id of parkingUser
//parkingDetailsService.deleteParkingEntrySession(parkingDetails.getId());
return "redirect:/exit";
}
my form:
<div class="formCenterAndWidth">
<form action="#" th:action="#{/saveDateAndTimeOfExitParking}" method="POST">
<input type="hidden" th:field="*{user.id}"/>
<div class="form-group row">
<label class="col-sm-2 col-form-label">User Id:</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{user.id}">
</div>
<label class="col-sm-2 col-form-label">Parking Id:</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{parking.id}">
</div>
<label class="col-sm-2 col-form-label">First Name:</label>
<div class="col-sm-10">
<input class="form-control" type="text" th:field="*{user.firstName}">
</div>
<label class="col-sm-2 col-form-label">Last Name:</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{user.lastName}">
</div>
<label class="col-sm-2 col-form-label" style="white-space: nowrap;">License Number</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{user.license}">
</div>
<label class="col-sm-2 col-form-label">Entry Date</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{parking.entryDate}">
</div>
<label class="col-sm-2 col-form-label">Entry Time</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:field="*{parking.entryTime}">
</div>
<label class="col-sm-2 col-form-label">Exit Date</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:value="${#dates.format(exitDateAndTime, 'dd-MM-yyyy')}">
</div>
<label class="col-sm-2 col-form-label">Exit Time</label>
<div class="col-sm-10">
<input readonly class="form-control" type="text" th:value="${#dates.format(exitDateAndTime, 'HH:mm:ss')}">
</div>
<br><br>
<button type="submit" class="btn btn-info col-7 center">Exit Car</button>
</div>
</form>
Here I have a form that accepts package details and I have added dynamic form fields to get all the itineraries of that package. Please comment on what I must add to my question to make it more clear.
insert function
#PostMapping("/save-tour-package")
public String saveTourPackage(#ModelAttribute("tourPackage") TourPackage tourPackage, #RequestParam String[] day, #RequestParam String[] itinerary_title, #RequestParam String[] itinerary_description, #RequestParam String[] itinerary_altitude) {
// save package to database
TourPackage tour = tourPackageService.saveTourPackage(tourPackage);
for (int i = 0; i < day.length; i++) {
Itinerary ite = new Itinerary();
ite.setPackages(tour);
ite.setDay(day[i]);
ite.setTitle(itinerary_title[i]);
ite.setDescription(itinerary_description[i]);
ite.setAltitude(itinerary_altitude[i]);
itineraryRepo.save(ite);
}
return "redirect:/";
}
save service implementation
#Override
public TourPackage saveTourPackage(TourPackage tourPackage) {
return this.tourPackagesRepo.save(tourPackage);
}
view file
<div layout:fragment="content">
<div class="container">
<form th:action="#{/save-tour-package}" th:object="${tourPackage}" method="POST">
<div class="form-group">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" th:field="*{title}" placeholder="Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" th:field="*{description}"
placeholder="Description"></textarea>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="geography">Geography</label>
<input type="text" class="form-control" id="geography" th:field="*{geography}"
placeholder="Geography">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control" id="location" th:field="*{location}"
placeholder="Location">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="difficulty">Difficulty</label>
<input type="text" class="form-control" id="difficulty" th:field="*{difficulty}"
placeholder="Difficulty">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="altitude">Altitude</label>
<input type="text" class="form-control" id="altitude" th:field="*{altitude}"
placeholder="Altitude">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="religion">Religion</label>
<input type="text" class="form-control" id="religion" th:field="*{religion}"
placeholder="Title">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="ethnic_people">Ethnic People</label>
<input type="text" class="form-control" id="ethnic_people" th:field="*{ethnic_people}"
placeholder="Ethnic People">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="accommodation">Accommodation</label>
<input type="text" class="form-control" id="accommodation" th:field="*{accommodation}"
placeholder="Title">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="transportation">Transportation</label>
<input type="text" class="form-control" id="transportation" th:field="*{transportation}"
placeholder="Transportation">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="minimum_pax">Minimum Pax</label>
<input type="text" class="form-control" id="minimum_pax" th:field="*{minimum_pax}"
placeholder="Minimum Pax">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price" th:field="*{price}" placeholder="Price">
</div>
</div>
</div>
<div class="row">
<div class="col-2">Day</div>
<div class="col-3">Title</div>
<div class="col-3">Description</div>
<div class="col-3">Altitude</div>
<div class="col-1"></div>
</div>
<div class="row delete-field append-new-field">
<div class="col-2">
<input type="text" class="form-control" name="day">
</div>
<div class="col-3">
<input type="text" class="form-control" name="itinerary_title">
</div>
<div class="col-3">
<input type="text" class="form-control" name="itinerary_description">
</div>
<div class="col-3">
<input type="text" class="form-control" name="itinerary_altitude">
</div>
<div class="col-1">
<i class="fas fa-minus-circle"></i>
</div>
</div>
Add Fields
<div class="form-group">
<button type="submit" class="btn btn-info col-2"> Save Tour Package</button>
</div>
</div>
</form>
</div>
</div>
<div layout:fragment="after-script">
<script>
function addItineraryFields() {
var html = '<div class="row delete-field"><div class="col-2">\n' +
' <input type="text" class="form-control" name="day">\n' +
' </div>\n' +
' <div class="col-3">\n' +
' <input type="text" class="form-control" name="itinerary_title">\n' +
' </div>\n' +
' <div class="col-3">\n' +
' <input type="text" class="form-control" name="itinerary_description">\n' +
' </div>\n' +
' <div class="col-3">\n' +
' <input type="text" class="form-control" name="itinerary_altitude">\n' +
' </div>' +
' <div class="col-1">\n' +
' <i class="fas fa-minus-circle"></i>\n' +
' </div></div>';
$('.append-new-field').append(html);
}
$(document).on('click', '.delete-row', function(e) {
$(this).closest('.delete-field').remove();
return false;
});
</script>
</div>
My web app is basically: jsp + angularjs, but this datepicker is running with jQuery because of the template I am using.
Before explaining what is happening, my DTO's attributes matches my entity attributes, both java.util.Date, I am just informing that I already verified the attributes type because I got many 400 bad requests because of that.
I have a modal where I have many fields, but I inserted recently two datepickers (bootstrap) and till then app is crashing, when I send the POST via ajax to my java controller, I am receiving a bad request (400), I think that it is because the format is wrong (mm/dd/yyyy). I formatted correctly the date to pt_BR for Brazil but it is not working.
BoxApp.controller("UsuariosController", function($scope, $http) {
$scope.usuarios={};
$scope.usuariosParaAlterar={};
$scope.iniciar = function() {
$http.get('/boxmlV2/usuario').success(function (response) {
$scope.usuarios = response;
});
};
$scope.iniciar();
$scope.setSelected = function(selecao){
$scope.usuariosParaAlterar = selecao;
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(formUsuarios) {
$scope.submitted = true;
if (formUsuarios.$valid) {
$("#dataValidadeConta").datepicker({
format: 'dd/mm/yyyy',
language: 'pt-BR'
});
$("#dataValidadeSenha").datepicker({
format: 'dd/mm/yyyy',
language: 'pt-BR'
});
$scope.editaUsuario();
}
};
$scope.editaUsuario = function() {
$http.post('/boxmlV2/usuario/salvarUsuario', {
ativo : $scope.usuariosParaAlterar.ativo,
idUsuario : idUsuario.value,
nome : nome.value,
senha : senha.value,
email : email.value,
bloqueado : $scope.usuariosParaAlterar.bloqueado,
dataValidadeConta : $scope.usuariosParaAlterar.dataValidadeConta,
dataValidadeSenha : $scope.usuariosParaAlterar.dataValidadeSenha,
resetSenha : $scope.usuariosParaAlterar.resetSenha,
perfil : $scope.usuariosParaAlterar.perfil
}).then(function(response) {
$scope.sucesso();
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
$scope.sucesso = function() {
$scope.closeMyPopup();
$scope.iniciar();
};
$scope.closeMyPopup = function() {
$(myModal_autocomplete).modal('hide');
};
$scope.preparaInsercao = function() {
nome.value = "";
senha.value = "";
email.value = "";
$(idUsuario).val("");
$(idUsuario).hide();
$(idLabel).hide();
};
});
<!-- START MODAL -->
<div id="myModal_autocomplete" class="modal fade" role="dialog"
aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title">Cadastro de Usuário</h4>
</div>
<div class="modal-body form">
<form name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Ativo:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<div class="clearfix">
<div>
<label class="btn btn-default active"> <input
type="radio" name="ativo"
ng-model="usuariosParaAlterar.ativo" value="true">
Sim <br />
</label> <label class="btn btn-default"> <input
type="radio" name="ativo"
ng-model="usuariosParaAlterar.ativo" value="false">
Não <br />
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="usuariosParaAlterar.nome"
class="form-control" id="nome" maxlength="100" name="nome"
required> <span style="color: red"
ng-show="submitted && form.nome.$error.required">Campo
Nome Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Senha:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="password" ng-model="usuariosParaAlterar.senha"
class="form-control" maxlength="100" name="senha"
placeholder="Do E-mail De Recebimento do XML" id="senha"
required> <span style="color: red"
ng-show="submitted && form.senha.$error.required">Campo
Senha Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">E-mail:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="email" ng-model="usuariosParaAlterar.email"
class="form-control" id="email" maxlength="100"
name="email" required> <span style="color: red"
ng-show="submitted && form.email.$error.required">Campo
E-mail Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Bloqueado:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<div class="clearfix">
<div>
<label class="btn btn-default active"> <input
type="radio" name="bloqueado"
ng-model="usuariosParaAlterar.bloqueado" value="true">
Sim <br />
</label> <label class="btn btn-default"> <input
type="radio" name="bloqueado"
ng-model="usuariosParaAlterar.bloqueado" value="false">
Não <br />
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Data Validade Conta:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input
class="form-control form-control-inline input-medium date-picker"
name="dataValidadeConta" id="dataValidadeConta"
ng-model="usuariosParaAlterar.dataValidadeConta"
size="16" type="text" value="" required/> <span
class="help-block"> Selecione a data </span>
<span style="color: red"
ng-show="submitted && form.dataValidadeConta.$error.required">Campo
Data Validade Conta Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Data Validade Senha:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input
class="form-control form-control-inline input-medium date-picker"
ng-model="usuariosParaAlterar.dataValidadeSenha"
name="dataValidadeSenha" id="dataValidadeSenha"
size="16" type="text" value="" required/> <span
class="help-block"> Selecione a data </span>
<span style="color: red"
ng-show="submitted && form.dataValidadeSenha.$error.required">Campo
Data Validade Senha Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Resetar Senha:<span
class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<div class="clearfix">
<div>
<label class="btn btn-default active"> <input
type="radio" name="resetSenha"
ng-model="usuariosParaAlterar.resetSenha" value="true">
Sim <br />
</label> <label class="btn btn-default"> <input
type="radio" name="resetSenha"
ng-model="usuariosParaAlterar.resetSenha" value="false">
Não <br />
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Perfil
Usuário:<span class="required" aria-required="true">
* </span>
</label>
<div class="col-md-9">
<div class="clearfix">
<div>
<label class="btn btn-default active"> <input
type="radio" name="perfil"
ng-model="usuariosParaAlterar.perfil" value="true">
Admin <br />
</label> <label class="btn btn-default"> <input
type="radio" name="perfil"
ng-model="usuariosParaAlterar.perfil" value="false">
Usuário <br />
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="usuariosParaAlterar.idUsuario"
class="form-control" id="idUsuario" maxlength="100"
name="idUsuario" required disabled> <span
style="color: red"
ng-show="submitted && form.idUsuario.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary"
ng-click="submitForm(form)">
<i class="fa fa-check"></i> Salvar
</button>
</div>
</div>
</div>
</div>
<!-- END MODAL -->
Controller:
package br.com.kolss.boxml.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import br.com.kolss.boxml.dto.RetornoDTO;
import br.com.kolss.boxml.dto.UsuarioDTO;
import br.com.kolss.boxml.enums.RetornoEnum;
import br.com.kolss.boxml.service.UsuarioService;
#Controller
public class CadastroUsuariosController {
#Autowired
private UsuarioService usuarioService;
#RequestMapping(value="/usuario", method=RequestMethod.GET)
public ModelAndView iniciar(ModelMap modelMap){
return new ModelAndView("usuario");
}
#RequestMapping(value="/usuario",method=RequestMethod.GET,produces={"application/json"})
public #ResponseBody List<UsuarioDTO> obterTodos(ModelMap modelMap){
return usuarioService.obterTodos();
}
#RequestMapping(value = "/usuario/salvarUsuario", method = RequestMethod.POST, produces = { "application/json" })
public #ResponseBody RetornoDTO insereOuEditaUsuario(
#RequestBody UsuarioDTO usuarioDTO) {
usuarioService.insereOuEditaUsuario(usuarioDTO);
return new RetornoDTO(RetornoEnum.SUCESSO);
}
}
The date formatting to pt_BR only applies to how it is displayed in the datepicker control. Note that you are sending back a string mm/dd/yyyy to the server, you need to be sure that it is parsed as such at the controller.
I need to bind an object with a list of objects as an attribute. It is a static list and it is created and partially filled in the Controller. It is displayed correctly in the view, however the value in the input field is not set when the form is sent to the controller. I did some research and found several similar questions, however none of the proposed solutions worked for me.
edit.jsp
<c:forEach items="${priceConfigurationForm.priceList}" var="price" varStatus="priceStatus">
<tr>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].country">
${price.country}
<input type="hidden" name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].amount">
<input type="text" name="price" value="${price.amount}"/>
<input type="hidden"
name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
<td>
<spring:bind path="priceConfigurationForm.priceList[${priceStatus.index}].currency">
${price.currency}
<input type="hidden" name="<c:out value="${status.expression}"/>"
id="<c:out value="${status.expression}"/>"
value="<c:out value="${status.value}"/>"/>
</spring:bind>
</td>
</tr>
</c:forEach>
Abstract from Controller populating the list:
#RequestMapping(value = "/price/create", method = RequestMethod.GET)
public String toCreatePriceConfiguratioView(Model model) {
log.info("::createPriceConfiguration: {}");
final PriceConfigurationForm priceConfigurationForm = new PriceConfigurationForm();
final List<PriceConfigurationForm.Price> prices = new ArrayList<>();
for (Country country : Country.values()) {
PriceConfigurationForm.Price price = new PriceConfigurationForm.Price();
price.setAmount(100);
price.setCountry(country.getCountryCode());
price.setCurrency(country.getCurrency());
prices.add(price);
}
priceConfigurationForm.setPriceList(prices);
model.addAttribute("priceConfigurationForm", priceConfigurationForm);
return "/secured/sources/onboarding/price/edit";
}
Abstract from Controller for storing the list:
#RequestMapping(value = "/price/create", method = RequestMethod.POST)
public String createPriceConfiguration(Model model, #ModelAttribute("priceConfigurationForm") #Valid PriceConfigurationForm priceConfigurationForm, BindingResult bindingResult, RedirectAttributes attributes) {
log.info("::createPriceConfiguration {}", priceConfigurationForm);
// TODO: Validate, before create
/* transform form to domain object */
PriceConfiguration configuration = PriceConfigurationForm.toPriceConfiguration(priceConfigurationForm);
onboardingApi.createPriceConfiguration(configuration);
attributes.addFlashAttribute("message", success("price configuration saved", priceConfigurationForm.getName()));
return "/secured/sources/onboarding/price/index";
}
Object:
#Data
public class PriceConfigurationForm {
private String name;
private String description;
private List<Price> priceList;
private Map<String, Long> countryToPriceMap;
public static PriceConfiguration toPriceConfiguration(PriceConfigurationForm form) {
final PriceConfiguration pc = new PriceConfiguration();
pc.setName(form.getName());
pc.setDescription(form.getDescription());
final Map<String, Long> prices = form.getPriceList().stream().collect(toMap(Price::getCountry, Price::getAmount));
pc.setCountryToPriceMap(prices);
return pc;
}
#Data
public static class Price {
private String country;
private long amount;
private String currency;
}
}
This is example of how I sucessfully parsed nested objects in one project :
<c:forEach var="block" items="${newplaceform.blocks}" varStatus="counter">
<fieldset data-block-order="${counter.index}" data-block-index="${counter.index}">
<c:if test='${block.type=="quizSingleAnswer"}'>
<legend><s:message code='blocks.type.quizSingleAnswer'/> <a class="glyphicon glyphicon-move move-block pull-right" href="#"></a><a data-remove="block" class="glyphicon glyphicon-remove pull-right" href="#"></a><a data-reordering="up" class="glyphicon glyphicon-chevron-up pull-right" href="#"></a><a data-reordering="down" class="glyphicon glyphicon-chevron-down pull-right" href="#"></a></legend>
<div class="form-group production-hide">
<label class="col-sm-3 control-label">id:</label>
<div class="col-sm-9"><input type="text" name="blocks[${counter.index}].id" value="${block.id}" data-row="blockId" data-disabled class="form-control"/></div>
</div>
<div class="form-group production-hide">
<label class="col-sm-3 control-label">type:</label>
<div class="col-sm-9"><input type="text" name="blocks[${counter.index}].type" value="${block.type}" data-disabled class="form-control"/></div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><s:message code='blocks.description'/>:</label>
<div class="col-sm-9"><textarea class="form-control" name="blocks[${counter.index}].description" data-description rows="3">${block.description}</textarea></div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-6 control-label">
<label class="inner-header"><s:message code='blocks.answers'/>:</label>
</div>
<div class="col-sm-6">
<div class="btn-group m-t-9">
<a class="btn btn-primary btn-xs" href="#" data-add-answer data-add-answer-block-index="${counter.index}"><i class="glyphicon glyphicon-plus"></i> <s:message code="blocks.add-answer" /></a>
</div>
</div>
</div>
</div>
<div class="row quiz-answers" data-count-answer="${block.answers.size()}">
<c:forEach var="answer" items="${block.answers}" varStatus="counterInner">
<div class="col-sm-6">
<fieldset>
<legend>
<div class="bootstrap-center">
<span><s:message code="blocks.answerNo"/> ${counterInner.index+1}</span>
<a data-remove="answer" class="glyphicon glyphicon-remove pull-right" href="#"></a>
</div>
</legend>
<div class="form-group production-hide">
<label class="col-sm-6 control-label">id:</label>
<div class="col-sm-6"><input type="text" name="blocks[${counter.index}].answers[${counterInner.index}].id" value="${answer.id}" data-row="answerId" data-disabled class="form-control"/></div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"><s:message code="blocks.answer"/>:</label>
<div class="col-sm-6"><input type="text" name="blocks[${counter.index}].answers[${counterInner.index}].text" value="${answer.text}" class="form-control"/></div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-6">
<div class="checkbox">
<label>
<input type="checkbox" name="blocks[${counter.index}].answers[${counterInner.index}].right" value="true" ${answer.checked()}/>
<s:message code="blocks.right"/>
</label>
</div>
</div>
</div>
</fieldset>
</div>
</c:forEach>
</div>