Question

好的，也许这还不清楚。获取此表单：

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

为什么所有按钮都会触发submit()功能？以及如何避免这种情况？

Answer 1

我看到两个解决方案：

1）明确指定 type =“button”（我认为更可取）：

<button type="button" (click)="preview();">Preview</button>

根据W3规范：

http://w3c.github.io/html-reference/button.html

按钮元素带指定无类型属性 表示与按钮相同的内容 元素，其type属性设置为“submit”。

2）使用$event.preventDefault()：

<button (click)="preview(); $event.preventDefault()">Preview</button>

或

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}

Answer 2

This Plunker建议不然，每个按钮似乎都按预期工作。

但是，为防止表单的默认行为，您可以执行此操作，

<强> TS：

submit(e){
 e.preventDefault();
}

<强>模板：

<form (submit)="submit($event)" #crisisForm="ngForm">

Answer 3

我发现2.0版本(ngSubmit)正在将null事件值传递给方法，所以应该让我们(submit)

<form (submit)="submit($event)" #crisisForm="ngForm">

您的.ts文件

submit($event){
   /* form code */
   $event.preventDefault();
}

Answer 4

在您不想执行提交的按钮中设置 type =＆＃34;按钮＆＃34; 。

Answer 5

我有同样的问题。我找到的工作是用button替换a并将按钮样式应用于锚元素：

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>

Answer 6

您必须在app.module.ts中从'@ angular / forms'导入FormsModule

X509Certificate cert = GetFirstNamedrootLocalMachineCertficate(certName);
Task t = ssl.AuthenticateAsServerAsync(cert).ContinueWith(taskResult =>
   {
       .... 
   }

Answer 7

Angular 为此提供了一个内置的解决方案。您只需将 (submit)="handleSubmit()" 替换为 (ngSubmit)="handleSubmit()"。通过这样做，e.preventDefault() 将在幕后由 angular 本身隐式调用。

避免Angular2在按钮点击时系统地提交表单

7 个答案: