Given my form:

 <form #f="ngForm" (ngSubmit)="saveNew(f)">
        <div class="form-group">
            <label><strong>Text Hu</strong></label>
            <quill-editor name="textHU" [ngModel]="textHU">
            </quill-editor>

            <label class="mt-4"><strong>Text En</strong></label>
            <quill-editor name="textEN" [ngModel]="textEN">
            </quill-editor>
        </div>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>

Component:

  saveNew(form: NgForm) {
        this.termsOfServiceNew.text.textEN = form.value.textEN;
        this.termsOfServiceNew.text.textHU = form.value.textHU;
        this.http.post("/api/terms_of_service/admin", this.termsOfServiceNew, this.jsonRequestOptions).subscribe(r => {
            this.termsOfServiceNew.text.textEN = "";
            this.termsOfServiceNew.text.textHU = "";
            this.toggleNewContainer();
            this.refreshList();
        });
    }

Every form have this attribute: #f="ngForm"

Should this #f be unique for every form?

Angular base app was generated by JHipster (springboot back-end).

I have several similar forms in my app, in different components on different routes. When I load or reload my app (ctrl+f5) and submits the form it works perfectly. It calls my API, saves data into DB. I can repeat it, it works fine, but when i navigate elsewhere (different route) then all my forms across the application stops working. When I hit the submit button, does not happen anything. No error on console, ngSubmit methods are not called anymore.

Do you have any idea, what could cause this strange issue?

Thanks for any help!