title: Angular 2 - FormGroup ValueChanges Unsubscribe
body: <p>I have a FormGroup with ValueChanges event that is not being released from memory when the user moves from component's route to another component and then they return to the component.</p>
  
  <p>What this means is that if the user navigates away from component and then back to the component 5 times, the onFormChange method fires 5 times, but only 1 of those calls is for the current component.</p>
  
  <p>I figured that the problem was that I needed to unsubscribe from the the valueChanges event in the NgDestroy event, but there is no unsubscribe method available on the valueChanges event. </p>
  
  <p>I am sure I have to unsubscribe or release memory for something, but I'm not sure what.</p>
  
  <pre><code>import * as _ from 'lodash';
  import {Observable} from 'rxjs/Rx';
  
  import {Component, Input, Output, EventEmitter, OnInit, OnDestroy} from '@angular/core';
  import {FormGroup} from '@angular/forms';
  
  import {formConfig} from './toolbar.form-config';
  import {JobToolbarVm} from '../view-model/job-toolbar.vm';
  import {BroadcastService} from '../../../services/broadcast/broadcast.service';
  
  @Component({
      selector: 'wk-job-toolbar',
      template: require('./toolbar.html'),
  })
  export class JobToolbarComponent implements OnInit, OnDestroy {
  
    protected form: FormGroup;
  
    @Input()
    toolbar: JobToolbarVm;
  
    @Output()
    toolbarChanged = new EventEmitter&lt;JobToolbarVm&gt;();
  
    @Output()
    refresh = new EventEmitter&lt;string&gt;();
  
    constructor(private broadcast: BroadcastService) {
    }
  
    ngOnInit() {
  
      this.form = formConfig;
      this.form.setValue(this.toolbar, {onlySelf: true});
  
      // This ALWAYS RUNS when the form loads, ie. on the job route
      console.log('FORM VALUE');
      console.log(JSON.stringify(this.form.value, null, 2));
  
      this.form.valueChanges
        .debounceTime(2000)
        .subscribe(
          this.onFormChange.bind(this)
        );
    }
  
    ngOnDestroy() {
      //this.form.valueChanges.unsubscribe();
      //this.onChanges.unsubscribe();
      //this.toolbarChanged.unsubscribe();
      //this.form = null;
    }
  
    onFormChange(data: any) {
      // This runs whenever I go to a different route and then come back to this route
      // There is also a memory leak, because this method fires multiple times based on how
      // often I navigate away and come back to this route.
      // e.g. Navigate away and then back 5 times, then I see this log statement 5 times 
      console.log('FORM VALUE2 - THIS KEEPS FIRING FOR EACH INSTANCE OF MY COMPOMENT');
      console.log(JSON.stringify(this.form.value, null, 2));
  
      JobToolbarVm.fromJsonIntoInstance(data, this.toolbar);
  
      this.onChanges('data-changed');
    }
  
    onChanges($event: any) {
      console.log('onChanges: ' + $event);
      // console.log(this.toolbar);
  
      // Send the toolbar object back out to the parent
      this.toolbarChanged.emit(this.toolbar);
  
      // Broadcast an event that will be listened to by the list component so that it knows when to refresh the list
      this.broadcast.broadcast('job-admin-toolbar-changed', this.toolbar);
    }
  }
  </code></pre>