title: Creating observable from submit event
body: <p><strong>Disclaimer</strong>: I'm super new to both Angular and RXJS.</p>
  
  <p>I have a simple form from which I'm trying to create an observable. This will  look for <code>submit</code> events and update some value in the component. However, I'm getting a <code>this._subscribe is not a function</code> error.  </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form (submit)='submitForm()'&gt;
    &lt;button type='submit'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  
  
  <p><strong>My component</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs';
  import UtilsHelperService from '../services/utils-helper.service';
  
  @Component({...stuffs...})
  
  export class HomeComponent implements OnInit {
    formSubmit: Observable&lt;any&gt;;
    counter = 0;
   
    constructor() { }
  
    ngOnInit() {
      const form = document.getElementsByTagName('form')[0];
      this.formSubmit = Observable.create(form, 'submit');
    }
  
    submitForm() {
      this.formSubmit.subscribe(
        UtilsHelperService.formSubmitObserver(this.counter));
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>And my <code>utils-helper.service.ts</code> helper class...</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export default class UtilsHelperService {
    static formSubmitObserver(counter) {
      return {
        next: (value) =&gt; {
          counter++;
        },
        error: err =&gt; console.log(err),
        complete: () =&gt; console.log('complete')
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>I see that the <code>formSubmit</code> observer is created fine.  </li>
  <li>I have the <code>UtilsHelperService.formSubmitObserver</code> method that returns an <code>observer</code> object with the 3 necessary methods.</li>
  </ul>
  
  <p>So, I'm not sure whether if it's the Angular stuffs I'm doing wrong (which I guess not) or its the RXjs stuff. Thank you for your time reading it :)</p>