Angular: Formulario: la página se recarga cuando NgForm se elimina / restaura a través de NgIf

Creado en 1 feb. 2016 · 3Comentarios · Fuente: angular/angular

Extraño pero surgido inocentemente.

Intenté implementar la función de restablecimiento de formulario (faltante) al alternar el formulario anterior fuera del DOM y volverlo a ingresar con un NgIf fijado a una bandera active

<form *ngIf="active" 
          (ngSubmit)="onSubmit()" #heroForm="ngForm">

controlado por el método del componente clear como este

  clear() {
    this.model = new Hero(42, '', '');
    this.active = false;
    setTimeout(()=> this.active=true, 0);
  }

Cuando el formulario es válido (como lo es al principio), al hacer clic en borrar se vuelve a cargar la página. Si el formulario no es válido (por ejemplo, sin nombre), no hay recarga.

Aquí hay una reproducción a través de plunker:
http://plnkr.co/edit/GNhLbONEDHyApCm9vUeh

Fuente

wardbell

👍1

Comentario más útil

El botón de borrar tiene el tipo "enviar". Entonces, al hacer clic en él, el formulario se enviará. Se supone que NgForm intercepta el evento de envío, pero debido a que NgIf elimina el elemento de formulario del DOM, la interceptación no ocurre. Puede solucionarlo configurando el tipo de botón en "botón".

vsavkin en 1 feb. 2016

👍2 🎉1

Todos 3 comentarios

vsavkin en 1 feb. 2016

👍2 🎉1

Gracias. ¡No sabía que un <button> _sin un atributo de tipo _ es lo mismo que un botón de envío!
Eso cura el problema como se ve en este plunker revisado: http://plnkr.co/edit/u3ltLP84JHn2VkoFKf46?p=preview

Cerrando este problema y abriendo # 6822 que requiere una característica explícita reset para reemplazar el truco ilustrado por este plunker.

wardbell en 1 feb. 2016

👍1

Este problema se ha bloqueado automáticamente debido a la inactividad.
Por favor, presente un nuevo problema si se encuentra con un problema similar o relacionado.

Obtenga más información sobre nuestra política de bloqueo automático de conversaciones .

_{_Esta acción ha sido realizada automáticamente por un bot._}