title: How to trigger reactive form valueChanges subscription only on input blur and enter key in Angular 2
body: <p>I'm working on a form that is supposed to update some ui parts only on input blur or enter key pressed. I'm a big fan of reactive forms and I'm trying to figure out what is the proper way. So far I haven't found too many answers for reactive forms. Most of them are focused on template driven forms. I got something like this so far:</p>
  
  <p><strong>Form component</strong> Dynamic form values change at runtime (No predictable filed names)</p>
  
  <pre><code>import { Component, Input, Output, EventEmitter, 
      ChangeDetectionStrategy } from '@angular/core'
  import { FormBuilder, FormGroup, FormControl } from '@angular/forms'
  import { Observable } from "rxjs/Observable"
  import { DEBUG } from '../../../../config/config'
  import * as Debug from 'debug'
  
  // Interfaces
  import { Foo } from '../../interfaces/foo'
  
  // Services
  import { FooService } from '../../services/foo.service'
  
  // Debug
  const debugOff = (...any) =&gt; { }, debug = Debug('app:FooCmp')
  
  @Component({
      selector: 'foo-data-cmp',
      templateUrl: './foo.data.cmp.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
      styleUrls: ['./foo.data.cmp.css']
  })
  export class FooDataCmp {
  
      private _foo: Foo[] = null
      @Input('foo')
      set foo(foo: Foo[]) {
          this._foo = foo
          DEBUG.input &amp;&amp; debug('Input foo:', this._foo)
      }
      get foo(): Foo[] {
          return this._foo
      }
  
      // Forms
      public fooForm: FormGroup
      public fooForm$: Observable&lt;any&gt;
      private updatedFoo: any[] // Updated form values
  
      // Subscriptions
      private subscriptions: any[] = []
  
      constructor(
          private formBuilder: FormBuilder,
          private fooService: FooService,
      ) {
          DEBUG.constr &amp;&amp; debug('Construct FooDataCmp')
      }
  
      ngOnInit() {
          DEBUG.init &amp;&amp; debug('Initialise FooDataCmp')
  
          // Form
          this.initFooForm()
          this.subcribeToFormChanges()
      }
  
      ngOnDestroy() {
          DEBUG.destroy &amp;&amp; debug('Destroy FooDataCmp')
          this.subscriptions.forEach(sub =&gt; sub.unsubscribe())
      }
  
      private initFooForm() {
          DEBUG.cmp &amp;&amp; debug('Initialise foo form')
  
          // Build the form
          this.fooForm = this.formBuilder.group(this._foo)
  
          // Prevent undefined error at first keystroke
          this.updatedFoo = this._foo
      }
  
      private subcribeToFormChanges() {
          this.fooForm$ = this.fooForm.valueChanges
          let sub = this.fooForm$.subscribe(fooForm =&gt; {
              DEBUG.cmp &amp;&amp; debug('Form changes fooForm', fooForm)
              this.updatedFoo = fooForm
          })
          this.subscriptions.push(sub)
      }
  
      /**
       * &lt;!&gt; Important step in the data update process
       * Update state store. 
       * Other services / components are subscribed to the state store itself
       */
      public refreshAllFooRelatedData () {
          DEBUG.cmp &amp;&amp; debug('Refresh all foo related data')
          DEBUG.cmp &amp;&amp; debugOff('Updated foo', this.updatedFoo)
          this.fooService.refreshAllFooRelatedData(this.updatedFoo)
      }
  
      public refreshAllFooRelatedDataOnEnter (e: KeyboardEvent) {
          if (e.keyCode !== 13) {return}
          DEBUG.cmp &amp;&amp; debug('Refresh all foo related data (on enter)')
          DEBUG.cmp &amp;&amp; debugOff('Updated foo', this.updatedFoo)
          this.fooService.refreshAllFooRelatedData(this.updatedFoo)
      }
  
      public debugTemplate() {
          DEBUG.render &amp;&amp; debug('Render FooDataCmp')
      }
  
  }
  </code></pre>
  
  <p><strong>Form template</strong></p>
  
  <pre><code>&lt;form [formGroup]="fooForm"&gt;
      &lt;table class="list expiries"&gt;
              &lt;td *ngFor="let value of foo; let i = index"&gt;
                  &lt;input type="text" [formControlName]="foo[i]" 
                      (blur)="refreshAllFooRelatedData()" 
                      (keydown)="refreshAllFooRelatedDataOnEnter($event)"&gt;
              &lt;/td&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  
  {{ debugTemplate() }}
  </code></pre>
  
  <p>Is this a decent solution or am I missing some trick? My question is if this is the proper way to do it. I've been expecting to find some form API options for handling this task. My approach was to build on top of the forms, but I would rather use the full form api if there is anything available for this task</p>