How to Build Auto-Saving Forms in Angular 11

Form Auto-Save

Let's see how we can actually autosave forms in Angular 11. Since the framework leverages RxJS we're already in a pretty good situation to reactively save data upon value changes.

When you're using reactive forms, any AbstractControl (e.g. a FormGroup or single FormControl) will expose an observable property valueChanges. Sadly, just like any other form API, this observable is still typed as any despite emitting the value object of your form. Recently, the Angular team announced their work on strongly typed forms, so this might get better soon!

valueChanges: Observable<any>, A multicasting observable that emits an event every time the value of the control changes, in the UI or programmatically -- Angular Documentation

In order to facilitate autosave, you can now easily subscribe to this observable, map the form value to something your server understands, and send off the data.

Continue reading How to Build Auto-Saving Forms in Angular 11