Button reloads when inside a form Angular2 (kind of css too)

Question

I just realized that when a button is inside a form - not initialized on a FormGroup - and does nothing to do with the form, like back or cancel, it reloads the whole page.

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

What I want to do is having two buttons at the same margin-top and with a margin between them. So if both buttons are inside the form everything goes awesome, leaving out the problem I just mentioned. If I let out the form the cancel button my style goes to hell but the flow works like Angular2 does: awesome.

Button inside form:

Button outside the form:

Well, I think that leaving the button inside the form is kind of bad practice, but I really don't know how to handle it. So, is there any way of adding a button inside the form without being part of it? (I would really expect for this Angular2 answer) Or, is it possible to do some magic inside the .css file in order to fake the being of the button inside the form? (I think this would be the hard way, but maybe the correct one).

Thanks a lot.

Just in case anyone asks for the code:

html (the button is gonna be inside the form):

<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>

842Mono · Accepted Answer · 2017-04-22 03:01:02Z

2

I just realised what was the problem:

When a button is set inside a form, the default type of it is submit, so I just set the type button and the problem is gone.

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

I'm posting this anyways just in case. Happy programming to everybody!

edited Apr 22, 2017 at 3:01

842Mono

1,9882 gold badges24 silver badges42 bronze badges

answered Nov 25, 2016 at 20:24

RaulGM

3422 gold badges6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Button reloads when inside a form Angular2 (kind of css too)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related