The Imperative Pattern for Autosave

Building a recipe creation form

We used Angular reactive forms to build the “New Recipe” creation form. As described in Using RxJS in Angular and Its Advantages, reactive forms leverage RxJS by using the valueChanges observable to track the FormControl changes. This makes our jobs easier since we want to listen to the form’s value changes in order to perform a save on every change. The HTML code of the “New Recipe” creation form is in the recipe-creation.component.html file.

In src/app/recipe-creation/recipe-creation.component.ts, we only define the form as follows: