Angular app restarting every time there is a submission to json server

Question

Suddenly, out of nowhere, without anything modified or updated, every time I press a button to submit some data to my app's fake backend database (json server API) the page re-loads.

This happens on Chrome and Firefox and Edge.

I looked around and found some suggestions (e.g. here) for changing the for submission button type from type="submit" to type="button" but this does not work for me, because then my form data is not submitted.

Is there a way to programmatically do this? Has anyone come across this lately?

p.s. For now, I am not 'watching' my 'db.json' as a workaround to avoid this issue, but I have to fix it to be able to have my json server API running...

EDIT

This is my form code:

<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>

This code was fine. I doubt that there is something in the form code. I suspect something in my package-lock.json changes, because this lock file used to be in my gitignore file, then I learned that it should actually be under version control, so I did so. Could it have anything to do with changes in the lock file at all?

Answer 1

You can stop submitting the form and use

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

You should also remove the ngSubmit from the form element.