Tengo un modal que contiene un formulario, cuando se destruye el modal me aparece el siguiente error en la consola:
Envío de formulario cancelado porque el formulario no está conectado
El modal está añadido a un elemento <modal-placeholder>
que es hijo 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 ocurra, pero en mi caso tenía un botón que el navegador interpretaba como un botón de envío y, por tanto, el formulario se enviaba cuando se pulsaba el botón, lo que provocaba el error. Añadiendo type="button" se solucionó el problema. Elemento completo:
<button type="button" (click)="submitForm()">
Así que en realidad me encontré con el mismo problema exacto de hoy, excepto sin un modal involucrados. En mi formulario, tengo dos botones. Uno que envía el formulario y uno que, cuando se hace clic, rutas de vuelta a la página anterior.
<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
Al hacer clic en el primer botón con el routerLink hace exactamente lo que se supone que, pero también al parecer trata de enviar el formulario, así, y luego tiene que abandonar la presentación de formularios porque la página que el formulario estaba en es desmontado desde el DOM durante la presentación.
Esto parece ser exactamente lo mismo que le está pasando a usted, excepto con un modal en lugar de toda la página.
El problema se soluciona si especificas directamente que el tipo del segundo botón no sea submit.
<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>
Así que si usted está cerrando el modal a través de un 'Cancelar' botón o algo por el estilo, especificando que el botón's tipo, como se muestra arriba, debe resolver su problema.
En el elemento form necesitas definir el método submit (ngSubmit), algo como
<form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">
.
y en el botón submit omites el método click, porque ahora tu formulario está conectado al método submit:
<button class="btn btn-success" type="submit">Save</button>
El botón debe ser de tipo submit.
En el código detrás del componente se implementa el método "onSubmit", por ejemplo algo como esto
onSubmit(value: ICurrency) {
...
}
Este método recibe un objeto value con los valores de los campos del formulario.