相关疑难解决方法(0)

我正在使用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 …

我正在Angular 2应用程序中构建一个表单.

Html给了我提交事件.在Angular中,我可以使用(submit)事件绑定来监听此事件.最重要的是,Angular使用(ngSubmit)添加了我可以听到的ngSubmit事件.

我知道提交来自html,而来自Angular的ngSubmit.我不明白为什么我需要听一个特殊的ngSubmit事件,而不是正常的提交事件.

我创建了一个侦听这两个事件的plunker,两者似乎都在做同样的事情.

听(提交)和(ngSubmit)有什么区别？

@Component({
  selector: 'my-app',
  template: `
    <form (submit)='onSubmit(form)' (ngSubmit)='onNgSubmit(form)' novalidate #form='ngForm'>
      <input type='text' name='input' [(ngModel)]='input' required>
      <input type='submit' value='Submit' required>
    </form>
  `,
})
export class App {

  input : string;

  onSubmit(form): void {
    console.log(`submit: ${this.input}, valid: ${form.valid}`);
  }

  onNgSubmit(form): void {
    console.log(`ng-submit: ${this.input}, valid: ${form.valid}`);
  }
}