I'm currently using an Angular2 template to build a form.
Whenever I click on the button, the page refreshes.
Fortunately, my validations are functioning properly.
Is there any way to prevent the page from refreshing when the user clicks the button?
Below is the HTML code snippet that I am working with:
<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>