CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-ng-clickng-submit
trs
trs

Reputation: 863

Why is Angular form reloading the page?

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.

Upvotes: 2

Views: 4630

Answers (3)

AWESOME WORLD
AWESOME WORLD

Reputation: 109

this stopped my paage from reloading

<button  mat-raised-button color="accent" type="button" (click)="addFabric(formTemplate.value)">submit</button>

Upvotes: 0

marwan abuassi
marwan abuassi

Reputation: 111

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.

Upvotes: 11

jkris
jkris

Reputation: 6531

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.

Upvotes: 1

Related Questions