ngSubmit以Angular 2格式刷新页面
发布时间:2020-12-17 08:14:11 所属栏目:安全 来源:网络整理
导读:我使用Angular2模板创建表单。 当我点击按钮,页面刷新。 我的验证工作正常。 当用户点击按钮时,如何才能停止页面刷新? 以下是我使用的HTML: div class="panel panel-default" div class="panel-heading" h3 class="panel-title"Add Employee/h3 {{model
我使用Angular2模板创建表单。
当我点击按钮,页面刷新。 我的验证工作正常。 当用户点击按钮时,如何才能停止页面刷新? 以下是我使用的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>
它会刷新,因为onSubmit处理程序中有错误
使用event.PreventDefault();在onSubmit: <form (ngSubmit)="onSubmit(empForm,$event)" ... > public onSubmit(empForm: any,event: Event) { event.preventDefault(); .... rest of your code } 您也可以检查控制台输出来调试错误 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |