ngSubmit refreshes the page in Angular 2 form
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>
Solution 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{ }
Solution 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
Solution 3:
Use instead:
<button type="button"
The reload is caused by the default submit behavior of the browser.
Solution 4:
This worked and stopped the whole page from reloading:
- I changed the button type from "submit" to "button"
-
I introduced a (click)=
submitValues()
inside the button props like this :submit
This stopped the page from reloading, I hope this helps.