html - 按钮在 Angular2 表单内重新加载(也是一种 css)

Question

我刚刚意识到，当按钮位于表单内时(未在 FormGroup 上初始化)并且与表单无关(例如后退或取消)，它会重新加载整个页面。

For the example it's gonna be a send button and a back button.

我想要做的是让两个按钮位于相同的页边距顶部，并且它们之间有一个边距。因此，如果两个按钮都在表单内，一切都会很棒，忽略我刚才提到的问题。如果我按下取消按钮，我的风格就会变得很糟糕，但流程就像 Angular2 一样:太棒了。

表单内的按钮:

表单外的按钮:

嗯，我认为将按钮留在表单中是一种不好的做法，但我真的不知道如何处理它。那么，有什么方法可以在表单中添加按钮而不成为表单的一部分吗？ (我真的很期待这个 Angular2 答案)或者，是否可以在 .css 文件中做一些魔法，以伪造表单内按钮的存在？ (我认为这将是一个困难的方法，但也许是正确的方法)。

非常感谢。

以防万一有人索要代码:

html(按钮将位于表单内):

<form [formGroup]="f" (ngSubmit) = "onSubmit()">
  <div class = "form-group">
    <input placeholder = "e-mail" formControlName = "email" type = "text">
  </div>
  <div class = "form-group">
    <input placeholder = "Password" formControlName = "password" type = "password">
  </div>
  <div class = "form-group">
    <input placeholder = "Pass-conf" formControlName = "pass-conf" type = "password">
  </div>
  <div class="buttons">
    <button class = "ok" type = "submit"><img src="./assets/img1.png" alt="Ok"></button>
    <button class = "back" (click) = "back ()"><img src="./assets/img2.png" alt="Back"></button>
  </div>
</form>

Answer 1

我刚刚意识到问题是什么:

当在表单中设置按钮时，它的默认类型是submit，所以我只需设置类型button，问题就消失了。

<button class="back" (click)="back()" type="button"><img ...</button>

我还是发布这个以防万一。祝大家编程愉快!