ngSubmit以Angular 2forms刷新页面

我正在使用Angular2模板来创build表单。

当我点击button，页面刷新。

我的validation工作正常。

当用户点击button时，如何停止页面刷新？

以下是我正在使用的HTML：

<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

它刷新，因为在onSubmit处理程序中有一个错误..使用event.PreventDefault(); 在onSubmit ：

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

也可以检查控制台输出来debugging错误…确保标记preserve log选项

Answer 2

确保从包含组件的模块中的@ angular / forms中导入FormsModule ，因为如果没有它，提交的表单将不会刷新页面，并在不logging任何内容的情况下以静默方式失败。

 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 3

改用：

 <button type="button" 

重新加载是由浏览器的默认提交行为引起的。