加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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
}

您也可以检查控制台输出来调试错误
…确保标记保留日志选项

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读