Express.js应用程序错误:表单字段值不持久 [英] Express.js application bug: form filed values do not persist

问题描述

我正在使用 博客应用程序 (点击指向请参见 GitHub 存储库)，其中 Express ，

I am working on a blogging application (click the link to see the GitHub repo) with Express, EJS and MongoDB.

当然有一种添加新帖子"形式，在控制器中带有addPost()方法；

There is an "Add New Post" form of course, with an addPost() method in the controller;

exports.addPost = (req, res, next) => {
    const errors = validationResult(req);
    const post = new Post();

    post.title = req.body.title;
    post.short_description = req.body.excerpt
    post.full_text = req.body.body;

    console.log(post);

    if (!errors.isEmpty()) {
        req.flash('danger', errors.array());
        req.session.save(() => res.render('admin/addpost', {
            layout: 'admin/layout',
            website_name: 'MEAN Blog',
            page_heading: 'Dashboard',
            page_subheading: 'Add New Post',
            post: post
        }));
    } else {
        post.save(function(err) {
            if (err) {
                console.log(err);
                return;
            } else {
                req.flash('success', "The post was successfully added");
                req.session.save(() => res.redirect('/dashboard'));
            }
        });
    }
}

表单视图:

<form action="./post/add" method="POST" class="mb-0">

    <div class="form-group">
        <input type="text" class="form-control" name="title" value="<%= req.body.title %>" placeholder="Title" />
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="excerpt" value="<%= req.body.excerpt %>" placeholder="Excerpt" />
    </div>

    <div class="form-group">
        <textarea rows="5" class="form-control" name="body" placeholder="Full text">
            <%= req.body.title%>
        </textarea>
    </div>

    <div class="form-group mb-0">
        <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
    </div>

</form>

假设某些必需表单字段已提交，但并非全部.

Suppose some of the required form fields are filed-in, but not all of them.

再次呈现表单视图，并显示错误消息，其中显示空的必填字段.但是必填的非空字段应保留其数据.但是他们没有.

The form view is rendered again, with error messages for the empty required fields. But the required fields that are not empty should persist their data. But they do not.

使用此语法在<input type="text" class="form-control" name="title" value="<%= post.title %>" placeholder="Title" />中也不起作用，即使行console.log(post)在控制台中显示了这一点，按预期:

Using this syntax does not work either <input type="text" class="form-control" name="title" value="<%= post.title %>" placeholder="Title" /> even though the line console.log(post) shows this in the console, as expected:

{
  updated_at: 2020-03-18T10:49:17.199Z,
  created_at: 2020-03-18T10:49:17.199Z,
  _id: 5e71fcbe7fafe637d8a2c831,
  title: 'My Great Post',
  short_description: '',
  full_text: ''
}

我想念什么?

更新:

生成的HTML格式:

<form action="./post/add" method="POST" class="mb-0">
    <div class="form-group">
        <input type="text" class="form-control" name="title" value="" placeholder="Title">
    </div>

    <div class="form-group">
        <input type="text" class="form-control" name="excerpt" value="" placeholder="Excerpt">
    </div>

    <div class="form-group">
        <textarea rows="5" class="form-control" name="body" placeholder="Full text"></textarea>
    </div>

    <div class="form-group mb-0">
        <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
    </div>
</form>

推荐答案

您需要在控制器和视图上进行的更改很少，我在下面提到了这两项更改

There are few things you'll have to change on your controller and view, I have mentioned both changes below

在您的控制器上

exports.addPost = (req, res, next) => {
    var form = {
        titleholder: req.body.title,
        excerptholder : req.body.excerpt,
        bodyholder: req.body.body
    };
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
            req.flash('danger', errors.array())
            //req.session.save(() => res.redirect('../addpost'));
            res.render('admin/addpost',{
                layout: 'admin/layout',
                website_name: 'MEAN Blog',
                page_heading: 'Dashboard',
                page_subheading: 'Add New Post',
                form:form});
    } else {

后面的代码与您已经拥有的代码相同，我添加了一个form对象，并将您的res.redirect更改为res.render

Code after else is same as you already have, I have added a form object and changed your res.redirect to res.render

这将是您的视图的代码

<div class="col-sm-7 col-md-8 col-lg-9">
    <div class="card">
        <div class="card-header d-flex px-2">
            <h6 class="m-0"><%= page_subheading %></h6>
        </div>
        <div class="card-body p-2">
            <form action="./post/add" method="POST" class="mb-0">               
                <div class="form-group">
                        <input type="text" class="form-control" name="title" value="<%= typeof form!='undefined' ? form.titleholder : '' %>" placeholder="Title" />
                </div>

                <div class="form-group">
                        <input type="text" class="form-control" name="excerpt" value="<%= typeof form!='undefined' ? form.excerptholder : '' %>" placeholder="Excerpt" />
                </div>

                <div class="form-group">
                        <textarea rows="5" class="form-control" name="body" placeholder="Full text"><%= typeof form!='undefined' ? form.bodyholder : '' %></textarea>
                </div>

                <div class="form-group mb-0">
                    <input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
                </div>
        </form>
  </div>
    </div>
</div>

属性的

值已更改.我还为您的github项目创建了一个拉取请求.

values for value attribute is changed. I have also created a pull request for your github project.

这篇关于Express.js应用程序错误:表单字段值不持久的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！