每次向json服务器提交时，Angular应用程序都会重新启动

Question

突然间，在没有任何修改或更新的情况下，每次我按下按钮将一些数据提交到我的应用程序的伪后端数据库(json server API(时，页面都会重新加载。

这种情况发生在Chrome、Firefox和Edge上。

我环顾四周，发现了一些将提交按钮类型从type="submit"更改为type="button"的建议(例如此处(，但这对我不起作用，因为这样我的表单数据就不会提交。

有没有一种方法可以通过编程实现这一点？最近有人碰到这个吗？

p.s.目前，我并没有"关注"我的"db.json"作为避免这个问题的解决方法，但我必须修复它，才能运行我的json server API。。。

编辑

这是我的form代码：

<form #postForm="ngForm" (ngSubmit)="onAnnotateSelection(postForm.value)">
<div class="form-group">
<textarea name="chosenTitle" rows="1" class="form-control" placeholder="Enter a title for your annotation here..."
[(ngModel)]="chosenTitle">
</textarea>
<textarea name="highlightedText" id="selectedText" rows="3" class="form-control" placeholder="Your highlighted text will appear here..."
[(ngModel)]="highlightedText" (mouseup)="mouseUp()">
</textarea>
</div>
<button class="btn btn-outline-success" type="submit" [disabled]="!postForm.valid">
Annotate your highlighted/selected Text
</button>
<a class="btn btn-secondary active" role="button" [href]="fileUrl" download="annotations.txt">
Download All Annotations
</a>
</form>

这个代码很好。我怀疑表单代码中是否有内容。我怀疑我的package-lock.json中有什么变化，因为这个锁文件曾经在我的gitignore文件中，然后我知道它实际上应该在版本控制下，所以我这么做了。这与锁文件中的变化有什么关系吗？

Answer 1

您可以停止提交表单并使用

<button
class="btn btn-outline-success"
type="button"
[disabled]="!postForm.valid"
(click)="onAnnotateSelection(postForm.value)">
Annotate your highlighted/selected
</button>

您还应该从form元素中删除ngSubmit。