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

Posted 2023-03-27

【中文标题】每次有提交到 json 服务器时，Angular 应用程序都会重新启动

【英文标题】：Angular app restarting every time there is a submission to json server

【发布时间】：2021-12-27 12:56:32

【问题描述】：

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

这发生在 Chrome 和 Firefox 以及 Edge 上。

我环顾四周，发现了一些将提交按钮类型从 type="submit" 更改为 type="button" 的建议（例如 here），但这对我不起作用，因为那时我的表单数据没有提交。

有没有办法以编程方式做到这一点？最近有人遇到过这种情况吗？

附言目前，我并没有“观看”我的“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 文件中，然后我了解到它实际上应该在版本控制之下，所以我这样做了。是否与锁定文件的更改有任何关系？

【问题讨论】：

如何将数据绑定到表单控件？能否包含模板 sn-p（您使用的是响应式表单还是模板驱动的）？

10$ 您的表单被一个额外的<form> 标签包裹（您是在第三方网站上托管它吗？）请在最上面的<form> 标签之间添加模板。

@OctavianMărculescu 感谢您的回复。它是模板驱动的。我的提交是<button class="btn btn-outline-success" type="submit" [disabled]="!postForm.valid"> Annotate your highlighted/selected Text </button> 我将发布我的表单作为对问题的编辑...

@Stavm 如何获得我的 10 美元？ :-)

【参考方案1】：

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

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

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