Spring Form Input
build.gradle
Include those in the dependencies. We need the javax.validation library for error handling.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' compile group: 'javax.validation', name: 'validation-api', version: '2.0.1.Final'
Create a Class that Match the input of a form
Here we have a Cat class that has field id, name, breed, and date of birth.
package com.example.formsubmit import org.springframework.format.annotation.DateTimeFormat class Cat { private long id private String name private String breed @DateTimeFormat(pattern = "yyyy-MM-dd") private Date dateOfBirth long getId() { return id } void setId(long id) { this.id = id } String getName() { return name } void setName(String name) { this.name = name } String getBreed() { return breed } void setBreed(String breed) { this.breed = breed } Date getDateOfBirth() { return dateOfBirth } void setDateOfBirth(Date dateOfBirth) { this.dateOfBirth = dateOfBirth } }
Create the Controller
This controller takes a get, and a post method for path “/”. We use thymeleaf for view here.
For error handling we need to @Valid, and BindingResult. We can use bindingResult to see which fields have errors, we do not show it here.
@Controller class HomeController { @GetMapping("/") inputCat(Model model) { model.addAttribute("cat", new Cat()) return "inputForm" } @PostMapping("/") showSubmittedCat(@Valid Cat cat, BindingResult bindingResult, Model model) { if (bindingResult.hasErrors()) { model.addAttribute("errorMsg", "INPUT ERROR!") return "inputForm" } return "submittedForm" } }
Creating thymeleaf template
Form input UI:
<!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Form Input</title> </head> <body> <p th:if="${errorMsg!=''}" th:text="${errorMsg}"></p> <form action="/" th:action="@{/}" th:object="${cat}" method="post"> <p>ID:<input type="text" th:field="*{id}"></p> <p>Name:<input type="text" th:field="*{name}"></p> <p>Breed:<input type="text" th:field="*{breed}"></p> <p>Date of birth:<input type="text" th:field="*{dateOfBirth}"></p> <button type="submit">Submit</button> </form> </body> </html>
Display the submitted form:
<!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Submitted Form</title> </head> <body> <p th:text="'ID: ' + ${cat.id}"/> <p th:text="'Name:' + ${cat.name}"/> <p th:text="'Breed:' + ${cat.breed}"/> <p th:text="'Date of birth:' + ${#dates.format(cat.dateOfBirth, 'yyyy-MM-dd')}"/> </body> </html>