2

I have the following forms, on the same page:

<form ng-submit="actionA()">
    <input type="text">
    <input type="submit" value="Submit">
</form>

<form ng-submit="actionB()">
    <input type="text">
    <input type="submit" value="Submit">
</form>

At the moment, when I submit either form, the page reloads. How do I prevent that? I know I could use event.preventDefault() but I'd like to know if there's a plain Angular solution.

trs
  • 863
  • 2
  • 16
  • 35

3 Answers3

9

Make sure you import FormsModule from @angular/forms in the module containing your component because without it your form on submit will keep refreshing the page and failing silently without logging anything to the console.

marwan abuassi
  • 91
  • 1
  • 2
1

According to Angular's documentation it should not be reloading the page

Since the role of forms in client-side Angular applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in an application-specific way.

For this reason, Angular prevents the default action (form submission to the server) unless the element has an action attribute specified.

Here's the example given by them that doesn't reload.

I have a feeling your angular app is not bootstrapped or the bindings are not bound.

Community
  • 1
  • 1
jkris
  • 5,851
  • 1
  • 22
  • 30
0

this stopped my paage from reloading

<button  mat-raised-button color="accent" type="button" (click)="addFabric(formTemplate.value)">submit</button>
AWESOME WORLD
  • 109
  • 1
  • 7