Home > other >  Why th:field causes an error in Spring Boot and how to solve that?
Why th:field causes an error in Spring Boot and how to solve that?

Time:09-26

I've designed a very dummy form with Java, Spring and MySQL aiming which takes name and mail variables as an input and post these variables into user MySQL table which also has two columns as name and email. However once I use th:field inside form.html that is the main html file in the template folder.

My dependencies are:

- Thymeleaf = 2.5.5
- Spring JPA = 2.5.5
- JDBC API = 2.5.5
- Spring Web = 2.5.5
- MySQL Driver = 8.0.26

I've coded the UserEntity.java as follows:

package com.example.demo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity // This tells Hibernate to make a table out of this class
@Table(name="user")
public class UserEntity {
  @Id // stating it is the id
  @GeneratedValue(strategy=GenerationType.AUTO) // stating auto_increment feature
  private Integer id;
  private String name;
  private String email;
  
  // getters and setters

UserRepository.java;

package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;

// This will be AUTO IMPLEMENTED by Spring into a Bean called userRepository
// CRUD refers Create, Read, Update, Delete

public interface UserRepository extends JpaRepository<UserEntity, Integer> {

}

AccessingDataMysqlApplication.java;

package com.example.demo;


import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AccessingDataMysqlApplication {

  public static void main(String[] args) {
    SpringApplication.run(AccessingDataMysqlApplication.class, args);
  }

}

UserController.java

package com.example.demo;
 
import org.apache.catalina.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import com.example.demo.UserEntity;
import com.example.demo.UserRepository; 


@Controller
public class UserController {

    @RequestMapping("/")
    public ModelAndView welcome() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("form");
        return modelAndView;
    }  

    @Autowired private UserRepository userRepository;
    
    @PostMapping("/add")
    @ResponseBody
    public String
    addNewUser(@RequestParam String name, @RequestParam String email)
    {
        UserEntity newUser = new UserEntity();
        newUser.setName(name);
        newUser.setEmail(email);
        userRepository.save(newUser);
        return "User Created";
    }
}

And finally form.html

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="../static/css/styles.css" media="screen">
    <title>Job Application Form</title>
</head>
<body>
    <h1>Form</h1>

    <form th:action="@{/add}" 
          th:object="${user}"
          method="POST">
        
        <div>

            <div>Name: <input type="text" th:field="*{name}" required></div>
            <div>Email: <input type="text" th:field="*{email}" required></div>
        </div>

        <div>
            <input type="submit" value="Submit"> <input type="reset" value="Reset">
        </div>
    </form>
</body>
</html>

CodePudding user response:

The form expects a user-object (th:object="${user}) so you should provide this with the initial get-method

    @RequestMapping("/")
    public ModelAndView welcome() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("form");
        modelAndView.addObject("user", new UserEntity()); // <----  
        return modelAndView;
    } 

and the post-endpoint should handle the completed 'user'

    @PostMapping("/add")
    public String addNewUser( UserEntity user, ....);
        ...
        userRepository.save(user);
        ...
    }

Have a look here Bealdung spring-boot-crud-thymeleaf

  • Related