बटन क्लिक पर व्यवस्थित रूप से फॉर्म जमा करने के लिए Angular2 से बचें

Question

ठीक है, तो शायद यह स्पष्ट नहीं है। इस फॉर्म को प्राप्त करें:

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

सभी बटन submit()फ़ंक्शन को ट्रिगर क्यों करते हैं ? और इससे कैसे बचा जाए?

Comments

विवरण झूठा है; आपके सबमिट () फ़ंक्शन से

— अरन डेकर

Answer 1

मुझे इसे हल करने के लिए दो विकल्प दिखाई देते हैं:

1) स्पष्ट रूप से प्रकार = "बटन" निर्दिष्ट करें (मुझे लगता है कि यह अधिक बेहतर है ):

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

W3 विनिर्देश के अनुसार:

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

  एक बटन तत्व जिसका कोई प्रकार निर्दिष्ट नहीं है, वह उसी प्रकार का प्रतिनिधित्व करता है जिस तरह का बटन तत्व अपने प्रकार के विशेषता के साथ "सबमिट" करता है ।

2) का उपयोग करें $event.preventDefault():

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

या

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

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

Comments

(click)="preview(); false"वैसा ही करना चाहिए। उदाहरण के लिए stopPropagation(), विस्फोटक रूप से कॉल करने की आवश्यकता होगी, लेकिन यदि कोई ईवेंट हैंडलर लौटता है false, तो preventDefaultउसे ईवेंट पर बुलाया जाता है।

— गुंटर जोचबॉयर

@ गुंटर ज़ोचबॉयर इस बात की ओर इशारा करने के लिए बहुत बहुत धन्यवाद! सबसे पहले मैंने इसकी कोशिश की, लेकिन मैंने लिखा return falseऔर यह काम नहीं किया :)

— yurzui

returnशायद बाध्यकारी अभिव्यक्तियों में अनुमति नहीं है लेकिन अंतिम अभिव्यक्ति का मूल्य अनुमानित रूप से वापस आ जाता है।

— गुंटर ज़ोचबॉयर

# 2 का उपयोग करना सबसे अच्छा जवाब लगता है। बस: मेरे बटन पर टाइप = "बटन" समस्या को हल करता है

— माइकल वॉशिंगटन

मैं type=buttonW3C की कल्पना के बारे में नहीं जानता था । धन्यवाद!!

— ह्यूगो एच

Answer 2

यह प्लंकर अन्यथा सुझाव देता है, हर बटन के रूप में काम करने लगता है।

हालाँकि, आप ऐसा करने वाले फ़ॉर्म के डिफ़ॉल्ट व्यवहार को रोकने के लिए,

---

टीएस:

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

टेम्पलेट:

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

Comments

उत्तर के लिए धन्यवाद और plnkr ... यह बटन प्रकार के बारे में है plnkr.co/edit/BKIqcz7aKBFQDZioZ5Fy

— kfa

वास्तव में ! यह है। और आपने सभी बटनों को परिभाषित किया है, इसलिए यह इरादा के अनुसार काम कर रहा था

— अंकित सिंह

Answer 3

मैंने पाया कि 2.0 रिलीज के साथ विधि के लिए (ngSubmit)एक nullघटना मूल्य पारित कर रहा है इसलिए इसके बजाय आपको हमें करना चाहिए(submit)

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

आपकी .ts फ़ाइल

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

Comments

धन्यवाद! इसने काम किया, न जाने क्यों सोसाइटी काम करती है जब फॉर्म समूह के रूप में उपयोग नहीं किया जाता है, लेकिन जब मैं इसे एक फार्म समूह के रूप में उपयोग करता हूं तो मुझे आपके समाधान का उपयोग करना होगा

— निखिल दास नोमुला

यह उत्तर मैंने कुछ समय पहले दिया था जब 2.0 अभी रिलीज़ हुआ था, लेकिन उसके बाद कोणीय 2 एक लंबा रास्ता तय कर चुका है, तो क्या आप सुनिश्चित हैं कि आप नवीनतम रिलीज़ संस्करण का उपयोग कर रहे हैं?

— इमल हसरंगा परेरा

Answer 4

उस बटन में टाइप करें = "बटन" जिसे आप सबमिट निष्पादित नहीं करना चाहते हैं।

Answer 5

मेरे पास एक ही मुद्दा है। मेरे आस-पास का काम एंकर तत्व के buttonसाथ aबटन शैली को लागू करने और बदलने के लिए था :

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

Answer 6

आपको अपने app.module.ts में '@ कोणीय / रूपों' से फॉर्ममॉडल आयात करना होगा

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