Düğmeye tıklandığında formu sistematik olarak göndermek için Angular2'den kaçının

107

Tamam, belki bu belirsizdir. Bu formu alın:

<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>

Neden tüm düğmeler submit()işlevi tetikliyor ? Ve bundan nasıl kaçınılır?

— kfa
kaynak

1

yanlış dönüş; submit () fonksiyonunuzdan

— Aran Dekar

213

Çözmek için iki seçenek görüyorum:

1) Type = "button" u açıkça belirtin ( daha çok tercih edilir olduğunu düşünüyorum ):

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

W3 spesifikasyonuna göre:

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

Bir düğme elemanı ile hiçbir türü özellik belirtilen bir düğme ile aynı şeyi temsil "Gönder" kendi türü özelliği seti ile eleman .

2) Kullanım $event.preventDefault():

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

veya

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

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

— Yurzui
kaynak

3

(click)="preview(); false"aynısını yapmalı. Örneğin stopPropagation(), açıkça çağrılması gerekir, ancak bir olay işleyicisi geri dönerse false, preventDefaultolayda çağrılır.

— Günter Zöchbauer

1

@ Günter Zöchbauer Bunu işaret ettiğiniz için çok teşekkürler! Öncelikle denedim ama yazdım return falseve işe yaramadı :)

— yurzui

1

returnMuhtemelen bağlama ifadelerinde izin verilmez ancak son ifadenin değeri örtük olarak döndürülür.

— Günter Zöchbauer

2

# 2'yi kullanmak en iyi cevap gibi görünüyor.

— Michael Washington

1

type=buttonW3C'nin teknik özelliklerini bilmiyordum . Teşekkür ederim!!

— Hugo H

17

Bu Plunker aksini öneriyor, her düğme amaçlandığı gibi çalışıyor gibi görünüyor.

Ancak, formun varsayılan davranışını önlemek için bunu yapabilirsiniz,

TS:

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

Şablon:

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

— Ankit Singh
kaynak

Cevap ve plnkr için teşekkürler ... Bu düğme türü hakkında hepsi plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy

— kfa

aslında ! bu. ve tüm düğmeleri tanımladınız, bu yüzden amaçlandığı gibi çalışıyordu

— Ankit Singh

7

2.0 sürümünün yönteme (ngSubmit)bir nullolay değeri ilettiğini buldum, bu yüzden bunun yerine biz(submit)

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

.ts dosyanız

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

— imalathane hasaranga perera
kaynak

Teşekkür ederim! Bu işe yaradı, neden ngSubmit'in bir form grubu olarak kullanılmadığında işe yaradığını bilmeyin, ancak onu bir form grubu olarak kullandığımda çözümünüzü kullanmam gerekiyor

— Nikhil Das Nomula

Bu cevabı 2.0 yeni çıktığında bir süre önce vermiştim, ancak bu açısal 2 uzun bir yol kat ettikten sonra en son sürümü kullandığınızdan emin misiniz?

— imal hasaranga perera

6

Göndermeyi yürütmek istemediğiniz düğmede type = "button" olarak ayarlayın .

— Alexis Gamarra
kaynak

6

Bende de aynı sorun var. I etrafında iş yerini edildi bulundu buttonile ave ankraj elemana düğme stili uygulanır:

<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
kaynak

6

App.module.ts içinde '@ angular / formlar'dan FormsModule'u içe aktarmanız gerekir.

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

— Marouane Afrukh
kaynak