Angular: Formulário: a página é recarregada quando o NgForm é removido / restaurado via NgIf

Criado em 1 fev. 2016 · 3Comentários · Fonte: angular/angular

Bizarro, mas surgiu inocentemente.

Tentei implementar o recurso de redefinição de formulário (ausente) alternando o formulário anterior fora do DOM e de volta com um NgIf fixado em um sinalizador active

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

controlado pelo método do componente clear como este

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

Quando o formulário é válido (como é no início), clicar em limpar faz com que a página seja recarregada. Se o formulário for inválido (por exemplo, sem nome), não há recarga.

Aqui está uma reprodução via êmbolo:
http://plnkr.co/edit/GNhLbONEDHyApCm9vUeh

Fonte

wardbell

👍1

Comentários muito úteis

O botão limpar tem o tipo "enviar". Portanto, clicar nele faz com que o formulário seja enviado. Supõe-se que o NgForm intercepte o evento de envio, mas como o NgIf remove o elemento do formulário do DOM, a interceptação não ocorre. Você pode corrigir isso definindo o tipo de botão como "botão".

vsavkin em 1 fev. 2016

👍2 🎉1

Todos 3 comentários

vsavkin em 1 fev. 2016

👍2 🎉1

Obrigado. Eu não sabia que <button> _sem um atributo de tipo _ é o mesmo que um botão de envio!
Isso resolve o problema visto neste plunker revisado: http://plnkr.co/edit/u3ltLP84JHn2VkoFKf46?p=preview

Fechando este problema e abrindo # 6822 que pede um recurso reset explícito para substituir o hack ilustrado por este plunker.

wardbell em 1 fev. 2016

👍1

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_{_Esta ação foi executada automaticamente por um bot._}