Exploring the imperative pattern for autosave

We used Angular Reactive forms to build the New Recipe creation form. As described in the Using RxJS in Angular and its advantages section of Chapter 1, The Power of the Reactive Paradigm, 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. You can find the HTML code of the New recipe creation form in the file recipe-creation.component.html template.

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

 export class RecipeCreationComponent implements OnInit {
  constructor(private formBuilder: FormBuilder) { }
  recipeForm = this.formBuilder.group({
    id: Math.floor(1000 + Math.random() * 9000),
    title: [''],
    ingredients: [''],
 ...