使用ThymLeaf創建多個文本輸入框-有解無憂

我希望電子郵件、電話號碼和服務提供商這 3 個屬性中的每一個都有四個文本輸入框。每個輸入都應存盤在不同的 ArrayList 物件的電子郵件、電話號碼和服務提供商屬性中。

我認為 th:each 將被使用

這是我的代碼：

這是我的控制器端點方法：

@GetMapping("/")
    public String formMethod(Model model) {

        ArrayList<User> users = new ArrayList<>(4);

        model.addAttribute("users", users);
        return "communicationForm";
    }

這是我的用戶類：

public class User {

    String email;
    String phoneNumber;
    String serviceProvider;
    String emailSubject;
    String emailMessage;
    String textSubject;
    String textMessage;

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public String getServiceProvider() {
        return serviceProvider;
    }

    public void setServiceProvider(String serviceProvider) {
        this.serviceProvider = serviceProvider;
    }

    public String getEmailSubject() {
        return emailSubject;
    }

    public void setEmailSubject(String emailSubject) {
        this.emailSubject = emailSubject;
    }

    public String getEmailMessage() {
        return emailMessage;
    }

    public void setEmailMessage(String emailMessage) {
        this.emailMessage = emailMessage;
    }

    public String getTextSubject() {
        return textSubject;
    }

    public void setTextSubject(String textSubject) {
        this.textSubject = textSubject;
    }

    public String getTextMessage() {
        return textMessage;
    }

    public void setTextMessage(String textMessage) {
        this.textMessage = textMessage;
    }
}

這是我的communicationForm.html 檔案

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>OverStay LLC</title>
</head>
<body>
    <h2>Submit the email address or phone number. If the service provider is known, include it. If not, the program can find out.</h2>
    <h3>Enter the service providers like so: T-Mobile, Verizon, AT&T, Visible, Mint Mobile, Metro, Xfinity Mobile. ONLY enter them if you know which one it is</h3>
    <br>

    <form action="#" th:action="@{/sendMessage}" th:object="${users}" method="post">
        <th:block th:each="user : ${users}">
            <p>
                Email:
                <input type="text" th:value="${user.email}" />
            </p>
            </br></br>
        </th:block>

        <br>

        <th:block th:each="user : ${users}">
            Phone Number (Do NOT include a 1 as the first number):
            <input type="text" th:value="${user.phoneNumber}" />
            </br></br>
        </th:block>

        <br>

        <th:block th:each="user : ${users}">
            Service Provider:
            <input type="text" th:value="${user.email}" />
            </br></br>
        </th:block>

        </br></br>
        <input type="submit" value="Submit"/> <input type="reset" value="Reset">
    </form>

</body>
</html>

uj5u.com熱心網友回復：

Thymelef 不將List/ArrayList作為支持物件處理......所以你必須創建另一個物件來保存你的用戶。

public class UserForm {
  private List<User> users;
  // getters and setters
}

使用model.addAttribute("form", userForm);，典型的形式如下所示：

<form action="#" th:action="@{/sendMessage}" th:object="${form}" method="post">
    <th:block th:each="user, status: ${form.users}">
        <p>
            Email:
            <input type="text" th:field="*{users[__${status.index}__].email}" />
        </p>
        </br>
        </br>
    </th:block>

用于此的控制器方法如下所示：

@PostMapping("/sendMessage")
public String save(@ModelAttribute("form") UserForm form) {

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513587.html

標籤：html弹簧靴形式百里香叶春天百里香叶

上一篇：如何根據選擇值顯示動態輸入表單

下一篇：如何以反應形式使用1個輸入更新2個值