ngSubmit refreshes the page in Angular 2 form

Question

I am using Angular2 template for creating a form.

When i click on button, the pages refreshes.

My validations are working fine.

How can i stop page refresh when user clicks on button?

Following is HTML I am 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 is 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 a proper designation.             </div>         </div>         <button type="submit" class="btn btn-default" [disabled] ="!empForm.form.valid">Submit</button>         </form>     </div> </div> 

Answer 1

Make sure you import FormsModule from @angular/forms in the module containing your component because without it your form on submit will keep refreshing the page and failing silently without logging anything to the console.

import { NgModule }           from '@angular/core'; import { CommonModule }       from '@angular/common';  /*make sure you import it here*/ import { FormsModule }        from '@angular/forms';   @NgModule({   /*and add it to the imports array here*/   imports:      [ FormsModule,  CommonModule],   declarations: [ YourFormComponent ],   exports:      [],   providers:    [], })  export class FeatureModule{ } 

Answer 2

it refreshes because there is an error in onSubmit handler.. use event.PreventDefault(); in the onSubmit :

 <form (ngSubmit)="onSubmit(empForm, $event)" ... >   public onSubmit(empForm: any, event: Event) {   event.preventDefault();   .... rest of your code } 

also you can just check the console output to debug the error ... make sure to mark the preserve log option