Express. js ошибка приложения: сохраненные в форме значения не сохраняются

Question

Я работаю над приложением для ведения блога (нажмите на ссылку, чтобы увидеть репозиторий GitHub ) с Express, E JS и MongoDB.

Конечно, существует форма «Добавить новое сообщение» с методом 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

Есть несколько вещей, которые вам придется изменить на вашем контроллере и просмотреть, я упомянул оба изменения ниже

На вашем контроллере

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

И это будет код для вашего представления

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

Это должно работать.

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