title: Angular testing submit event on reactive form
body: <h2>Context</h2>
  
  <p>I have a component with a basic form (reactive form). I try to test the submit event on this form to see if it calls the necessary method properly.</p>
  
  <h2>My problem</h2>
  
  <p>I can't trigger the submit event of the form</p>
  
  <h2>Files</h2>
  
  <h3>Component.html</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="form-horizontal"
    id="staticForm"
    [formGroup]="mySimpleForm"
    (ngSubmit)="sendMethod();"
  &gt;
    &lt;input type="text" formGroupName="email"&gt;
    &lt;button type="submit"&gt;Send form&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h3>Component.ts</h3>
  
  <pre><code>  ngOnInit() {
      this.initSimpleForm();
    }
  
    private initSimpleForm() {
      let file = null;
  
      this.mySimpleForm = this.formBuilder.group({
        email: [
          '',
          [
            Validators.required
          ]
        ]
      });
    }
  
    sendMethod() {
      console.log('submitted');
    }
  </code></pre>
  
  <h3>component.spec.ts</h3>
  
  <pre><code>beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          MyComponent
        ],
        imports: [],
        providers: [
          FormBuilder
        ],
        schemas: [NO_ERRORS_SCHEMA]
      })
      .compileComponents();
  }));
  
  beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MyComponent);
      comp = fixture.componentInstance;
  });  
  
  it(`should notify in console on form submit`, () =&gt; {
      spyOn(console, 'log');
  
      comp.mySimpleForm.controls['email'].setValue('test@test.com');
      fixture.debugElement.query(By.css('form')).triggerEventHandler('submit', null);     
      fixture.detectChanges();
  
      expect(console.log).toHaveBeenCalled(); // FAILS
  });
  
  // TO make sure my spy on console log works, I made this and it works
  
  it(`will notify on direct sendMethod Call`, () =&gt; {
      spyOn(console, 'log');
  
      comp.sendMethod();      
      fixture.detectChanges();
  
      expect(console.log).toHaveBeenCalled(); // SUCCESS
  });
  </code></pre>
  
  <p>I also tried that instead of calling <code>submit</code> on form: </p>
  
  <pre><code>fixture.debugElement.query(By.css('button')).triggerEventHandler('click', null);
  </code></pre>
  
  <p><strong>How then to trigger the form submit event?</strong></p>