Using a partial for forms

Summary

In this chapter, we continue refactoring our views by creating a partial for the two forms in our blog application—one for adding a new article and another for updating an existing article. By the end, our code will be more reusable and maintainable.

Key steps:

1. Create a partial for the article form.

2. Refactor the new article and edit article pages to use the partial.

3. Pass data dynamically to handle both new and existing articles.

Transcript

All right, so now that we have a partial to render our articles, let's also create another partial for our article forms. We currently have:

• A form to add a new article

• A form to update an article

Since both share similar markup, we’ll extract them into a single partial.

Creating a partial for the article form

1. Inside the views/ directory, create a new folder called partials/ (if it doesn’t exist).

2. Create a new file:

   views/partials/article-form.ejs
   

3. Move the form markup from new.ejs into article-form.ejs.

Using the partial in new.ejs

In new.ejs, replace the form with:

<%- include ('../partials/article-form', { articleToBeUpdated: undefined }) %>

Here’s what’s happening:

• We pass articleToBeUpdated as undefined because this page doesn’t have an existing article.

• The form dynamically handles whether it’s creating or updating an article.

Now, if we test this by starting the Sails server and going to localhost:1337, we should still be able to create new articles.

Using the partial in edit.ejs

Now, let’s reuse the same partial in edit.ejs:

1. Remove the form markup.

2. Replace it with:

   <%- partial('../partials/article-form', { articleToBeUpdated: article }) %>
   

3. Refresh the page and verify that existing articles load correctly in the form.

Handling dynamic data in the partial

Since this form is used for both new and existing articles, we need to modify it to handle both cases.

Setting the form action dynamically

Modify article-form.ejs:

<form action="<%= articleToBeUpdated ? ('/articles/' + articleToBeUpdated.id + '/edit') : '/articles/new' %>" method="POST">

This ensures:

• Editing an article: Uses '/articles/:id/edit'.

• Creating an article: Uses '/articles/new'.

Prefilling the form fields

For the title field:

<input type="text" name="title" value="<%= articleToBeUpdated ? articleToBeUpdated.title : '' %>" />

For the body field:

<textarea name="body"><%= articleToBeUpdated ? articleToBeUpdated.body : '' %></textarea>

For the button text:

<button type="submit">
    <%= articleToBeUpdated ? 'Update Article' : 'Create Article' %>
</button>

This way:

• If an article exists, its values are pre-filled.

• If not, the form remains empty for a new article.

Fixing Undefined Variable Issues

When we visit the new article page, we might get an error:

ReferenceError: articleToBeUpdated is not defined

This happens because new.ejs doesn’t have articleToBeUpdated.

Solution: Explicitly Pass undefined in new.ejs

Modify new.ejs to:

<%- partial('../partials/article-form', { articleToBeUpdated: undefined }) %>

Now, everything should work perfectly! 🎉

Why This Matters

• Easier Maintenance: Updating the form layout only requires changes in one file.

• Code Reusability: We avoid duplicating form code.

• DRY Principle: The form dynamically adjusts based on whether we're creating or editing an article.

Now, whenever we need to change the form, we only edit article-form.ejs instead of multiple files. 🚀