typescript - ngSubmit refreshes the page in Angular 2 form -

i using angular2 template creating form.

when click on button, pages refreshes.

my validations working fine.

how can stop page refresh when user clicks on button?

following html using:-

<div class="panel panel-default">     <div class="panel-heading">         <h3 class="panel-title">add employee</h3>         {{model | json}}         {{ename.errors | json}}     </div>     <div class="panel-body">           <form (ngsubmit)="onsubmit(empform)" #empform="ngform" autocomplete="off" novalidate>          <div class="form-group">             <label for="employeename">employee name</label>             <input type="text" class="form-control" id="employeename" placeholder="employee name" required [(ngmodel)]="model.ename" name="ename" #ename="ngmodel" ngcontrol="ename" #ename="ename" >             <div *ngif="ename.touched && ename.errors" >                 <div *ngif="ename.errors.required"  class="alert alert-danger">                     employee name required                 </div>             </div>         </div>         <div class="form-group">             <label for="age">age</label>             <input type="text" class="form-control" id="age" name="age" placeholder="age" [(ngmodel)]="model.age" ngcontrol="age">         </div>         <div class="form-group">                         <label for="sex">sex</label>             <div class="d-block">                 <label class="radio-inline">                     <input type="radio" name="sex" id="male" value="0" (click)="model.sex=$event.target.value"> male                 </label>                 <label class="radio-inline">                     <input type="radio" name="sex" id="female" value="1" (click)="model.sex=$event.target.value"> female                 </label>             </div>         </div>          <div class="form-group">             <label for="doj">date of joining</label>             <datepicker [(ngmodel)]="model.doj" name="doj"></datepicker>         </div>          <div class="form-group">             <label for="salary">salary</label>             <input type="text" class="form-control" id="salary" placeholder="salary" [(ngmodel)]="model.salary" name="salary">         </div>          <div class="form-group">             <label for="designation">designation</label>             <select id="designation" name="designation" class="form-control" required [(ngmodel)]="model.designation" name="designation" #desig="ngform" ngcontrol="designation">                 <option value="" selected>-- select  --</option>                 <option *ngfor="let designation of designations" value="{{ designation.id }}">                      {{designation.name}}                  </option>             </select>             <div [hidden]="desig.valid || desig.pristine" class="alert alert-danger">                 please select proper designation.             </div>         </div>         <button type="submit" class="btn btn-default" [disabled] ="!empform.form.valid">submit</button>         </form>     </div> </div> 

it refreshes because there error in onsubmit handler.. use event.preventdefault(); in onsubmit :

 <form (ngsubmit)="onsubmit(empform, $event)" ... >   public onsubmit(empform: any, event: event) {   event.preventdefault();   .... rest of code } 

also can check console output debug error ... make sure mark preserve log option