title: ngSubmit is Not triggering the function
body: <pre><code>&lt;div [hidden]="submitted"&gt;
  &lt;div class="container" &gt;
      &lt;h1&gt;Employee Form&lt;/h1&gt;
      &lt;form  (ngSubmit)="onSubmit()" #employeeform= "ngForm" &gt;
        &lt;div class="form-group "&gt;
          &lt;label for="firstname" class="col-md-3"&gt;FirstName:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="firstname" required [(ngModel)]="model.firstname" name="firstname" #firstname="ngModel"&gt;
  
          &lt;div [hidden]= "firstname.valid || firstname.pristine" 
                  class="alert alert-danger" &gt;
              FirstName Required
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group "&gt;
          &lt;label for="lastname"&gt;LastName:&lt;/label&gt;
          &lt;input type="text" class="form-control" id="lastname" required [(ngModel)]="model.lastname" name="lastname" #lastname="ngModel"&gt;
          &lt;div [hidden]="lastname.valid || lastname.pristine "
                  class="alert alert-danger" &gt;
              LastName Required
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="form-group " &gt;
          &lt;label for="employeetype"&gt;Employee Type:&lt;/label&gt;
          &lt;select class="form-control" id="employeetype" [(ngModel)]="model.employeetype" name="employeetype"&gt; 
              &lt;option *ngFor="let emtype of employeetype"[value]="emtype" &gt;{{emtype}}&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;input type="submit" class="btn btn-success" (click)="newEmployee() ;employeeform.reset()" [disabled]="!employeeform.form.valid" value="submit"&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div [hidden]="!submitted"&gt;
    &lt;h2&gt;You submitted the following:&lt;/h2&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-3"&gt;Name&lt;/div&gt;
      &lt;div class="col-xs-9  pull-left"&gt;{{ model.firstname }}&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-3"&gt;Alter Ego&lt;/div&gt;
      &lt;div class="col-xs-9 pull-left"&gt;{{ model.lastname }}&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-3"&gt;Power&lt;/div&gt;
      &lt;div class="col-xs-9 pull-left"&gt;{{ model.employeetype }}&lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;button class="btn btn-primary" (click)="submitted=false"&gt;Edit&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have my HTML file like this and my Component.ts as follows </p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { Employee } from './employee';
  
  @Component({
      selector: 'employee-form',
      templateUrl: './employee-fom.controller.html'
  })
  
  export class EmployeeFormComponent{
  
      employeetype=['Consultant','Fulltime Hourly','Fulltime Salaried','Parttime'];
  
      model = new Employee(18,'sandeep','chetikam',this.employeetype[1]);
  
      submitted = false;
  
      onSubmit() { this.submitted = true;console.log(this.submitted); }
  
  
      newEmployee() {
    this.model = new Employee(42, '', '');
  
  }
  }
  </code></pre>
  
  <p>So in this ngSubmit show trigger the onSubmit function and change the submitted to true so that the [hidden]="!submitted" is activated. 
  But the ngSubmit is not triggering the onSubmit function.</p>
  
  <p>I can't understand why.</p>