Editing Form Data

The preceding two chapters showed how to build an HTML form to add new birthdays into the Birthdays application and how to add server-side validation for that form. This chapter wraps up the form implementation by adding the ability to edit existing birthday information.

Doing this will involve adding Svelte component state to track whether the edit form is in listing or editing mode.

Up to this point, the server has stored data in a plain JavaScript array. We have been using TDD to force the simplest implementation that could possibly work. This chapter brings in a more complex implementation that uses a Map object, which we’ll do as part of the Refactor step as part of the Red-Green-Refactor workflow.

This chapter will cover the following key topics:

• Planning the path ahead
• Adding a Playwright test for editing form data
• Evolving the repository to allow ID lookup
• Updating the form action to handle edits
• Updating the list page...