Photo by Leon Dewiwje on Unsplash

How to Combine Add and Edit Forms in Angular

Create/update form with smart/dumb components

This article demonstrates how to build a reusable form component that supports add and edit modes. We do this by using the container and presentation components architecture. The goal is not about teaching forms, so we keep it as simple as possible using reactive forms.

The form

We create a simplified form without any validation to add and edit medals. The medal has three properties:

With reactive forms, the [formGroup] is a directive that we bind to and pass the form object in:

We inject the FormBuilder service and use the group() method to create the form controls matching the template: