Dada mi forma:

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

Componente:

 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(); }); }

Cada formulario tiene este atributo: #f="ngForm"

¿Debería este #f ser único para cada formulario?

La aplicación base angular fue generada por JHipster (back-end springboot).

Tengo varios formularios similares en mi aplicación, en diferentes componentes en diferentes rutas. Cuando cargo o recargo mi aplicación (ctrl+f5) y envío el formulario, funciona perfectamente. Llama a mi API, guarda datos en DB. Puedo repetirlo, funciona bien, pero cuando navego a otro lugar (ruta diferente), todos mis formularios en la aplicación dejan de funcionar. Cuando presiono el botón de enviar, no sucede nada. No hay error en la consola, los métodos ngSubmit ya no se llaman.

¿Tienes alguna idea de qué podría causar este extraño problema?

¡Gracias por cualquier ayuda!