Angular 4 scheduled form autosave

Question

I'm trying to implement form data autosave in Angular 4. It should work like this:

• User changes some data in the form -> some save request to DB is invoked. Let's assume some timer is started here for 2s.
• During 2s from previous save request all changes will not invoke any requests (to reduce DB load), but will trigger another save request then 2s timer will expire.
• If no timer is started at the moment then save request should be invoked immediately.

I suppose that Observable, Subject and Scheduler from RxJS will help me, but I am completely new to it. Could you suggest the best approach for achieving above functionality please?

Answer 1

You can just subscribe to valueChanges property on FormGroup object chained with the auditTime operator:

this.form.valueChanges.auditTime(2000).subscribe(formData => /* save to DB */)

Maybe also have a look at throttleTime and debounceTime operators.

Answer 2

For Angular 6, you may have to use pipe.

this.form.valueChanges.pipe(auditTime(2000)).subscribe(formData => /* save to DB */)