HTML 表单在把手视图中未显示正确的数据

Question

我第一次使用车把，同时使用 sequelize 和 postgresql（由 brad traversy 提供）创建一个快速应用程序。填写表单后，我使用 Joi 验证请求正文，如果出现错误，我会重新呈现表单（视图），并保留最初输入的值。问题是当这种情况发生时，文本会被自动修剪。

例如我用“Hello World”填写标题字段并且不在表单中填写其他字段，Joi 不会高兴所以我重新渲染表单（视图）并且当标题重新填充到表单中时，它只会改为说“你好”。

发布 Gig 资源的端点

// Add a Gig
router.post("/add", (req, res) => {
    let { title, technologies, budget, description, contact_email } = req.body;

    const { error } = validateGig(req.body);

    if (error) {
        // Re-Render The Form
        return res.status(400).render("add", {
            error: error.details[0].message,
            title,
            technologies,
            budget,
            description,
            contact_email
        });
    } else {
        budget == "" ? (budget = "Unknown") : (budget = `$${budget}`);

        // Make Lower Case and Remove Space After Comma
        technologies = technologies.toLowerCase().replace(/, /g, ",");

        // Insert Into Table
        Gig.create({
            title,
            technologies,
            budget,
            description,
            contact_email
        })
            .then((gig) => res.redirect("/gigs"))
            .catch((err) => console.log("Error Adding Gig" + err));
    }
});

车把视图

<section id="add" class="container">
    <div class="form-wrap">
        <h1>Add A Gig</h1>
        <p>Your contact email will be shared with registered users to apply to your gig</p>
        {{#if error}}
        <div class="error">
            <p>{{error}}</p>
        </div>
        {{/if}}
        <form action="/gigs/add" method="POST">
            <div class="input-group">
                <label for="title">Gig Title</label>
                <input type="text" name="title" id="title" class="input-box"
                    placeholder="eg. Small Wordpress website, React developer" maxlength="100" value={{title}}>
            </div>
            <div class="input-group">
                <label for="technologies">Technologies Needed</label>
                <input type="text" name="technologies" id="technologies" class="input-box"
                    placeholder="eg. javascript, react, PHP" maxlength="100" value={{technologies}}>
            </div>
            <div class="input-group">
                <label for="budget">Budget (Leave blank for unknown)</label>
                <input type="number" name="budget" id="budget" class="input-box" placeholder="eg. 500, 5000, 10000"
                    value={{budget}}>
            </div>
            <div class="input-group">
                <label for="description">Gig Description</label>
                <textarea name="description" id="description" class="input-box"
                    placeholder="Describe the details of the gig" rows="10">{{description}}</textarea>
            </div>
            <div class="input-group">
                <label for="budget">Contact Email</label>
                <input type="email" name="contact_email" id="contactemail" class="input-box"
                    placeholder="Enter an email" value={{contact_email}}>
            </div>
            <input type="submit" value="Add Gig" class="btn btn-reverse">
        </form>
    </div>
</section>

Answer 1

在模板中使用变量时，您仍然需要在属性值周围加上引号。

例如：

value={{title}}

应该写成

value="{{title}}"