ngSubmit refreshes the page in Angular 2 form
<p>I am using Angular2 template for creating a form.</p>

<p>When i click on button, the pages refreshes.</p>

<p>My validations are working fine. </p>

<p>How can i stop page refresh when user clicks on button?</p>

<p>Following is HTML I am using:-</p>

<pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;Add Employee&lt;/h3&gt;
        {{model | json}}
        {{EName.errors | json}}
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;  
        &lt;form (ngSubmit)="onSubmit(empForm)" #empForm="ngForm" autocomplete="off" novalidate&gt;

        &lt;div class="form-group"&gt;
            &lt;label for="EmployeeName"&gt;Employee Name&lt;/label&gt;
            &lt;input type="text" class="form-control" id="EmployeeName" placeholder="Employee Name" required [(ngModel)]="model.EName" name="EName" #EName="ngModel" ngControl="Ename" #EName="EName" &gt;
            &lt;div *ngIf="EName.touched &amp;&amp; EName.errors" &gt;
                &lt;div *ngIf="EName.errors.required"  class="alert alert-danger"&gt;
                    Employee Name is required
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label for="Age"&gt;Age&lt;/label&gt;
            &lt;input type="text" class="form-control" id="Age" name="Age" placeholder="Age" [(ngModel)]="model.Age" ngControl="Age"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;            
            &lt;label for="Sex"&gt;Sex&lt;/label&gt;
            &lt;div class="d-block"&gt;
                &lt;label class="radio-inline"&gt;
                    &lt;input type="radio" name="sex" id="Male" value="0" (click)="model.Sex=$event.target.value"&gt; Male
                &lt;/label&gt;
                &lt;label class="radio-inline"&gt;
                    &lt;input type="radio" name="sex" id="Female" value="1" (click)="model.Sex=$event.target.value"&gt; Female
                &lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;label for="DOJ"&gt;Date of Joining&lt;/label&gt;
            &lt;datepicker [(ngModel)]="model.DOJ" name="DOJ"&gt;&lt;/datepicker&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;label for="Salary"&gt;Salary&lt;/label&gt;
            &lt;input type="text" class="form-control" id="Salary" placeholder="Salary" [(ngModel)]="model.Salary" name="Salary"&gt;
        &lt;/div&gt;

        &lt;div class="form-group"&gt;
            &lt;label for="Designation"&gt;Designation&lt;/label&gt;
            &lt;select id="Designation" name="designation" class="form-control" required [(ngModel)]="model.Designation" name="designation" #desig="ngForm" ngControl="Designation"&gt;
                &lt;option value="" selected&gt;-- Select  --&lt;/option&gt;
                &lt;option *ngFor="let designation of designations" value="{{ designation.id }}"&gt; 
                    {{designation.name}} 
                &lt;/option&gt;
            &lt;/select&gt;
            &lt;div [hidden]="desig.valid || desig.pristine" class="alert alert-danger"&gt;
                Please select a proper designation.
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-default" [disabled] ="!empForm.form.valid"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>