javascript - change - Angular 2: envío del formulario cancelado porque el formulario no está conectado

router events subscribe angular 4

Question

Tengo un modal que contiene un formulario, cuando el modal se destruye, 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 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();

Answer 1

Así que en realidad me encontré exactamente con el mismo problema hoy, excepto sin un modal involucrado. En mi forma, 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>

Al hacer clic en el primer botón con el router, LinkLink 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 desmonta del DOM durante el envío.

Esto parece ser exactamente lo mismo que le está sucediendo, excepto 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 no sea 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.

Answer 2

En caso de que el envío del Formulario esté acompañado por la destrucción del componente, el envío del Formulario falla en condiciones de carrera con la separación del Formulario del DOM. Decir, tenemos

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

Si saveData es asíncrono (por ejemplo, guarda los datos a través de una llamada API), entonces podemos esperar el resultado:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

Si necesita abandonar el formulario de inmediato, también debería funcionar un enfoque de retraso cero. Esto garantiza que el destacamento DOM esté en el próximo ciclo de eventos después de que se haya llamado al envío del Formulario:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

Esto debería funcionar independientemente del tipo de botón.

Answer 3

En el elemento de formulario, debe definir el método de envío (ngSubmit), algo así como: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

y en el botón de enviar, omite el método de clic, porque su formulario ahora está conectado al método de envío: <button class="btn btn-success" type="submit">Save</button> El botón debe ser del tipo de envío.

En el código detrás del componente, implementa el método "onSubmit", por ejemplo algo como esto: onSubmit(value: ICurrency) { ... } Este método está recibiendo un objeto de valor con valores de los campos del formulario.

Answer 4

En la etiqueta del formulario, debe escribir lo siguiente:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

y dentro del formulario deberías tener el botón 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 ) provocará el mensaje de advertencia.

<button type="button"></button>

Answer 5

Puede haber otras razones por las que esto ocurre, pero en mi caso tuve 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 que causaba el error. Agregar type = "button" solucionó el problema. Elemento completo:

    <button type="button" (click)="submitForm()">

Answer 6

Tuve este problema recientemente y event.preventDefault() funcionó para mí. Agréguelo a su método de evento de clic.

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

submitForm(event: Event) { event.preventDefault(); ... }

Answer 7

Veo esto en Angular 6, incluso sin botones de envío. sucede cuando hay múltiples formas en la misma plantilla. No estoy seguro si hay una solución / cuál es la solución.

Answer 8

tuve esta advertencia, cambié el tipo de botón "enviar" a "botón" problema resuelto.