Evite o Angular2 para enviar sistematicamente o formulário ao clicar no botão

107

Ok, então talvez isso não esteja claro. Obtenha este formulário:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <button type="button" (click)="preview()">Preview</button>
   <button type="reset" (click)="reset()">Reset</button>
</form>

Por que todos os botões acionam a submit()função? E como evitar isso?

— kfa
fonte

1

retorna falso; de sua função submit ()

— Aran Dekar

213

Vejo duas opções para resolver isso:

1) Especifique type = "button" explicitamente (acho que é mais preferível ):

<button type="button" (click)="preview();">Preview</button>

De acordo com a especificação W3:

http://w3c.github.io/html-reference/button.html

Um elemento de botão com nenhum atributo tipo especificado representa a mesma coisa que um botão elemento com seu conjunto de tipo de atributo para "enviar" .

2) Use $event.preventDefault():

<button (click)="preview(); $event.preventDefault()">Preview</button>

ou

<button (click)="preview($event);">Preview</button>

preview(e){
  e.preventDefault();
  console.log('preview')
}

— Yurzui
fonte

3

(click)="preview(); false"deve fazer o mesmo. Por exemplo stopPropagation(), precisaria ser chamado explicitamente, mas se um manipulador de eventos retornar false, preventDefaultserá chamado no evento.

— Günter Zöchbauer

1

@ Günter Zöchbauer Muito obrigado por apontar isso! Primeiro eu tentei, mas eu escrevi return falsee não funcionou :)

— yurzui

1

returnprovavelmente não é permitido em expressões de ligação, mas o valor da última expressão é retornado implicitamente.

— Günter Zöchbauer

2

Usar o nº 2 parece ser a melhor resposta. Apenas adicionar: type = "button" ao meu botão resolveu o problema

— Michael Washington

1

Eu não sabia sobre type=buttonas especificações do W3C. Obrigado!!

— Hugo H

17

Este Plunker sugere o contrário, cada botão parece funcionar como pretendido.

No entanto, para evitar o comportamento padrão do formulário, você pode fazer isso,

TS:

submit(e){
 e.preventDefault();
}

Modelo:

<form (submit)="submit($event)" #crisisForm="ngForm">

— Ankit Singh
fonte

Obrigado pela resposta e pelo plnkr ... É tudo sobre o tipo de botão plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy

— kfa

de fato ! isto é. e você definiu todos os botões, então estava funcionando como o

— esperado

7

Descobri que com a versão 2.0 (ngSubmit)está passando um nullvalor de evento para o método, então, em vez disso, você deve(submit)

<form (submit)="submit($event)" #crisisForm="ngForm">

seu arquivo .ts

submit($event){
   /* form code */
   $event.preventDefault();
}

— Imal Hasaranga Perera
fonte

Obrigado! Isso funcionou, não sei porque o ngSubmit funciona quando não é usado como um grupo de formulários, mas quando eu o uso como um grupo de formulários, tenho que usar sua solução

— Nikhil Das Nomula

Eu respondi isso há algum tempo, quando o 2.0 acabou de ser lançado, mas depois que o angular 2 percorreu um longo caminho, você tem certeza de que está usando a versão de lançamento mais recente?

— imal hasaranga perera

6

Defina type = "button" no botão que você não deseja enviar.

— Alexis Gamarra
fonte

6

Eu tenho o mesmo problema. A solução que encontrei foi substituir buttonpora e aplicar o estilo do botão ao elemento âncora:

<form (ngSubmit)="submit()" #crisisForm="ngForm">
   <input type="text" name="name" [(ngModel)]="crisis.name">
   <button type="submit">Submit</button>
   <a class="btn" (click)="preview()">Preview</a>
   <a class="btn" (click)="reset()">Reset</a>
</form>

— Arun Ghosh
fonte

6

Você deve importar FormsModule de '@ angular / forms' em seu app.module.ts

import { FormsModule } from '@angular/forms';
 @NgModule({
  imports: [
    FormsModule
 ],
 })

— Marouane Afroukh
fonte