Express.js 应用程序错误：表单字段值不持久

Question

我正在研究 blogging application (click the link to see the GitHub repo) with Express, EJS 和 MongoDB。

当然有"Add New Post"形式，在控制器中有addPost()方法；

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>

假设一些必需的 表单字段已提交，但并非全部。

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

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

{
  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>

Answer 1

这应该有效。

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

                    <div class="form-group">
                            <input type="text" class="form-control" name="excerpt" value="<%=post && post.short_description? post.short_description : ''%>" placeholder="Excerpt" />
                    </div>

                    <div class="form-group">
                            <textarea rows="5" class="form-control" name="body" placeholder="Full text"><%=post && post.full_text? post.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>

Answer 2

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

在你的控制器上

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 {

else 之后的代码与您已有的代码相同，我添加了一个 form 对象并将您的 res.redirect 更改为 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>

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

Answer 3

添加帖子的完整工作代码如下所示。

在控制器中：

exports.addPost = (req, res, next) => {

    var form = {
        titleholder: req.body.title,
        excerptholder: req.body.excerpt,
        bodyholder: req.body.body
    };

    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;

    if (!errors.isEmpty()) {
        req.flash('danger', errors.array())
        res.render('admin/addpost', {
            layout: 'admin/layout',
            website_name: 'MEAN Blog',
            page_heading: 'Dashboard',
            page_subheading: 'Add New Post',
            form: form
        });
    } 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="/dashboard/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>

Express.js 应用程序错误：表单字段值不持久

Express.js application bug: form filed values do not persist

javascript

express

ejs

mean-stack