Tengo un modal que contiene un formulario, cuando se destruye el modal, aparece el siguiente error en la consola:
Envío de formulario cancelado porque el formulario no está conectado
El modal se agrega a un elemento <modal-placeholder> que es un elemento secundario directo de <app-root> , mi elemento de nivel superior.
¿Cuál es la forma correcta de eliminar un formulario del DOM y deshacerse de este error en Angular 2? Actualmente uso componentRef.destroy();
Puede haber otras razones por las que esto ocurre, pero en mi caso, tenía un botón que el navegador interpretó como un botón de envío y, por lo tanto, el formulario se envió cuando se hizo clic en el botón y se produjo el error. Agregar type="button" solucionó el problema. elemento completo:
<button type="button" (click)="submitForm()">En la etiqueta del formulario debes escribir lo siguiente:
<form #myForm="ngForm" (ngSubmit)="onSubmit()">y dentro del formulario deberías tener el botón de enviar:
<button type="submit"></button> Y lo más importante, si tiene otros botones en su formulario, debe agregarles type="button" . Dejar el atributo de type predeterminado (que creo que es submit ) generará el mensaje de advertencia.
<button type="button"></button>Así que en realidad me encontré exactamente con el mismo problema hoy, excepto sin un modal involucrado. En mi formulario, tengo dos botones. Uno que envía el formulario y otro que, cuando se hace clic, vuelve a la página anterior.
<button class="btn btn-default" routerLink="/events">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button>Hacer clic en el primer botón con el enlace del enrutador hace exactamente lo que se supone que debe hacer, pero aparentemente también intenta enviar el formulario y luego tiene que abandonar el envío del formulario porque la página en la que estaba el formulario se desmontó del DOM durante el envío.
Esto parece ser exactamente lo mismo que le está sucediendo a usted, excepto que con un modal en lugar de toda la página.
El problema se soluciona si especifica directamente el tipo del segundo botón para que sea algo distinto de enviar.
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>Entonces, si está cerrando el modal a través de un botón 'Cancelar' o algo por el estilo, especificar el tipo de botón, como se muestra arriba, debería resolver su problema.