Why is Angular form reloading the page?

Question

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.

Answer 1

确保从包含组件的模块中的@angular/forms导入FormsModule ，因为如果没有它，提交时的表单将不断刷新页面并静默失败，而不会将任何内容记录到控制台。

Answer 2

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.

Answer 3

按钮类型更改为button从submit

Answer 4

这阻止了我的页面重新加载

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