The Form Component

The job of the modal component is a simple one. It shows a modal pop-up with whatever component we choose to put inside, and it knows how to close it. The content we put inside our modal window may have its own state, markup, and events, so we’ll use another component-the form component. In this way, we can compose components into layers, each of which has a single responsibility. This is just one more way that the Phoenix Live generator provides us with an organized foundation for writing code that is capable of handling complex states while being easy to maintain.

The form component is a bit more complex than the modal component. It allows us to collect the fields for a product a user wants to create or update. The form component will also have events related to submitting and validating the form.

Let’s look at the form component in three steps:

• Rendering the template
• Setting up the socket
• Processing events.