title: ngSubmit not executing in Angular Reactive Form
body: <p>I'm new to angular, and was messing around reactive forms watching a tutorial. My ngSubmit() function is not executing and nothing happens when I click the submit button, spend an hour trying to find the root cause. Can someone help out?</p>
  
  <p>Employee.ts</p>
  
  <pre><code>export class Employee {
  
    private name: string;
    private email: string;
    private salary: number;
    private notes?: string;
  
  }
  </code></pre>
  
  <p>App.component.html</p>
  
  <pre><code>  &lt;div class="container-fluid"&gt;
    &lt;app-header&gt;&lt;/app-header&gt;
  &lt;/div&gt;
  
  &lt;div class="row justify-content-lg-center"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;app-employee-list&gt;&lt;/app-employee-list&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-4"&gt;
      &lt;app-employee-form&gt;&lt;/app-employee-form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Employee-component.html</p>
  
  <pre><code>&lt;form [formGroup]="reactiveForm" (submit)="employeeSubmit(this.reactiveForm.value)"&gt;
    &lt;div class="input-group mb-3"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;span class="input-group-text" id="basic-addon1"&gt;@&lt;/span&gt;
      &lt;/div&gt;
      &lt;input formControlName="name" type="text" class="form-control" placeholder="Username" aria-label="Username"
             aria-describedby="basic-addon1"&gt;
    &lt;/div&gt;
  
    &lt;div class="input-group mb-3"&gt;
      &lt;input formControlName="email" type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
             aria-describedby="basic-addon2"&gt;
      &lt;div class="input-group-append"&gt;
        &lt;span class="input-group-text" id="basic-addon2"&gt;@example.com&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="input-group mb-3"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;span class="input-group-text"&gt;$&lt;/span&gt;
      &lt;/div&gt;
      &lt;input formControlName="salary" type="text" class="form-control" aria-label="Amount (to the nearest dollar)"&gt;
      &lt;div class="input-group-append"&gt;
        &lt;span class="input-group-text"&gt;.00&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="input-group"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;span class="input-group-text"&gt;With textarea&lt;/span&gt;
      &lt;/div&gt;
      &lt;textarea formControlName="notes" class="form-control" aria-label="With textarea"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  
    &lt;div class="input-group"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Employee-form-component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {FormBuilder, FormGroup} from '@angular/forms';
  
  @Component({
    selector: 'app-employee-form',
    templateUrl: './employee-form.component.html',
    styleUrls: ['./employee-form.component.css']
  })
  export class EmployeeFormComponent implements OnInit {
  
    reactiveForm: FormGroup;
  
    constructor(private formBuilder: FormBuilder) {
      this.reactiveForm = this.formBuilder.group({
        'name': [''],
        'email': [''],
        'salary': [''],
        'notes': ['']
      });
    }
  
    ngOnInit() {
    }
  
    employeeSubmit(value) {
      // tslint:disable-next-line:no-debugger
      debugger;
      console.log(this.reactiveForm.value);
    }
  
  }
  </code></pre>