How to implement auto save a reactive form in angular 4?

Question

I want to auto save content in reactive form when form is valid without clicking save button.

Answer 1

You will want to subscribe to the statusChanges() method of your FormGroup, and in that Observable you can determine whether the FormGroup is valid and then trigger a save event.

import 'rxjs/add/operator/takeWhile';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({...})
export class MyComponent {

  private form: FormGroup;
  private alive: boolean;

  constructor(private formBuilder: FormBuilder) {}

  public ngOnInit(): void {
    this.alive = true;
    this.form = this.formBuilder.group({
      // your form configuration
    });

    this.form.statusChanges()
      .takeWhile(this.alive) // only subscribe while this component is alive
      .subscribe((status) => {
        // if status is valid, auto-save
      });
  }

  public void ngOnDestroy() {
    this.alive = false;
  }
}

Answer 2

Don't forget to unsubscribe at the end. You should capture your subscriptions and unsubscribe them at the end. to avoid any memory leaks.

import { Subscription } from 'rxjs/subscription';
@Component({...})
export class MyComponent {
 ...
 subscription = new Subscription;
 ...

 ngOnInit() {
  this.subscription.add(this.form.statusChanges()
   .takeWhile(this.alive)
   .subscribe(status => {
     //do whatever
   });

 ngOnDestroy() {
   this.subscription.unsubscribe();
 }

Answer 3

If you have asynchronous validators the option below will only save the form after the validators have been executed and no errors have been reported

formControl.statusChanges
  .pipe(
    filter((status) => status === 'VALID'),
    withLatestFrom(formControl.valueChanges),
    map(([_status, value]) => value),
    switchMap(value=>this.service.save(value)) // if you are using a service
    takeUntil(this.destroy$)
  )
  .subscribe((value) => {
    //if you've been using NGRX for example
    this.store.dispatch(action)
  });