कोणीय 2: फॉर्म जमा नहीं होने के कारण रद्द कर दिया गया

Question 1

मेरे पास एक मोडल है जिसमें एक फॉर्म होता है, जब मोडल नष्ट हो जाता है मुझे कंसोल में निम्नलिखित त्रुटि मिलती है:

फॉर्म जमा न होने के कारण रद्द कर दिया गया

मोडल एक <modal-placeholder>तत्व में जोड़ा जाता है जो कि <app-root>मेरे शीर्ष स्तर के तत्व के लिए एक सीधा बच्चा है ।

DOM से फ़ॉर्म निकालने और Angular 2 में इस त्रुटि से छुटकारा पाने का सही तरीका क्या है? मैं वर्तमान में उपयोग करता हूंcomponentRef.destroy();

Question 2

ऐसा होने के अन्य कारण भी हो सकते हैं लेकिन मेरे मामले में मेरे पास एक बटन था जिसे ब्राउज़र द्वारा सबमिट बटन के रूप में व्याख्यायित किया गया था और इसलिए जब बटन को क्लिक किया गया तो फॉर्म सबमिट हो गया। प्रकार = "बटन" जोड़ने से समस्या ठीक हो गई। पूर्ण तत्व:

    <button type="button" (click)="submitForm()">

Question 3

प्रपत्र टैग में आपको निम्नलिखित लिखना चाहिए:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

और फॉर्म के अंदर आपको सबमिट बटन होना चाहिए:

 <button type="submit"></button>

और सबसे महत्वपूर्ण बात, अगर आपके पास आपके फॉर्म में कोई अन्य बटन है, तो आपको type="button"उन्हें जोड़ना चाहिए । डिफ़ॉल्ट छोड़ रहा हैtype विशेषता (जो मुझे लगता है submit) को चेतावनी संदेश का कारण होगा।

<button type="button"></button>

Question 4

तो मैं वास्तव में सिर्फ एक ही समस्या में भाग गया आज एक मॉडल शामिल किए बिना। मेरे रूप में, मेरे पास दो बटन हैं। एक जो फ़ॉर्म को सबमिट करता है और एक, जब क्लिक किया जाता है, तो पिछले पृष्ठ पर वापस जाता है।

<button class="btn btn-default" routerLink="/events">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>

राउटरलिंक के साथ पहले बटन पर क्लिक करने पर वही होता है जो उसका माना जाता है, लेकिन जाहिर तौर पर फॉर्म को सबमिट करने की भी कोशिश करता है, और फिर फॉर्म सबमिशन को छोड़ना पड़ता है क्योंकि पेज जिस फॉर्म में था वह सबमिशन के दौरान DOM से अनमाउंट है।

यह ठीक वही बात प्रतीत होती है जो आपके साथ हो रही है, पूरे पृष्ठ के बजाय एक मोडल को छोड़कर।

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

<button type="button "class="btn btn-default" routerLink="/events">Cancel</button>

इसलिए यदि आप 'रद्द करें' बटन या किसी चीज़ के माध्यम से मोडल को बंद कर रहे हैं, तो उस बटन के प्रकार को निर्दिष्ट करते हुए, जैसा कि ऊपर दिखाया गया है, आपको अपनी समस्या को हल करना चाहिए।

Question 5

प्रपत्र तत्व में आपको सबमिट विधि (ngSubmit) को परिभाषित करने की आवश्यकता है, कुछ इस प्रकार है: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

और सबमिट बटन पर आप क्लिक विधि को छोड़ दें, क्योंकि आपका फॉर्म अब सबमिट विधि से जुड़ा हुआ है: <button class="btn btn-success" type="submit">Save</button>बटन सबमिट प्रकार का होना चाहिए।

घटक के पीछे कोड में आप "onSubmit" विधि को लागू करते हैं, उदाहरण के लिए कुछ इस तरह से: onSubmit(value: ICurrency) { ... } यह विधि प्रपत्र फ़ील्ड से मान के साथ एक मान ऑब्जेक्ट प्राप्त कर रहा है।

Question 6

इस मामले में कि फॉर्म जमा करना घटक के नष्ट होने के साथ हो रहा है, फॉर्म सबमिट करना डोम से फॉर्म को हटाने के साथ दौड़ की स्थिति में विफल रहता है। कहो, हमारे पास है

submitForm() {
  if (this.myForm.invalid) {
    return;
  }
  this.saveData(); // processing Form data
  this.abandonForm(); // change route, close modal, partial template ngIf-destroying etc
}

यदि saveDataयह async (उदाहरण के लिए यह एपीआई कॉल के माध्यम से डेटा बचाता है) तो हम परिणाम की प्रतीक्षा कर सकते हैं:

submitForm() {
  this.saveDataAsync().subscribe(
    () => this.abandonForm(),
    (err) => this.processError(err) // may include abandonForm() call
  );
}

यदि आपको तुरंत फॉर्म छोड़ने की आवश्यकता है, तो एक शून्य-देरी का दृष्टिकोण भी काम करना चाहिए। यह फॉर्म सबमिट किए जाने के बाद अगले ईवेंट लूप में होने वाली DOM टुकड़ी की गारंटी देता है:

submitForm() {
  this.saveData();
  setTimeout(() => this.abandonForm());
}

यह बटन प्रकार की परवाह किए बिना काम करना चाहिए।

Question 7

मुझे हाल ही में यह समस्या हुई और event.preventDefault()मेरे लिए काम किया। इसे अपनी क्लिक ईवेंट विधि में जोड़ें।

<button type="submit" (click)="submitForm($event)" mat-raised-button>Save</button>

तथा:

submitForm(event: Event) {
  event.preventDefault();
  // ...
}

Question 8

मैं इसे Angular 6 में देखता हूं, यहां तक कि बिना किसी सबमिट बटन के भी। जब एक ही टेम्पलेट में कई रूप होते हैं। सुनिश्चित नहीं है कि कोई समाधान है / क्या समाधान है।

Question 9

मेरे पास यह चेतावनी थी, मैंने बटन प्रकार "सबमिट" को "बटन" समस्या को हल किया।

Question 10

यदि आप अभी भी "सबमिट" प्रकार के बटन की कार्यक्षमता को बनाए रखना चाहते हैं, तो आपको उस बटन पर क्लिक इवेंट का उपयोग नहीं करना चाहिए। इसके बजाय आपको प्रपत्र पर ngSubmit ईवेंट का उपयोग करना चाहिए।

उदाहरण:

<form (ngSubmit)="destroyComponent()">
<button type="submit">submit</button>
</form>

Question 11

हो सकता है कि आप अपने फॉर्म सबमिशन पर किसी और पेज पर जा रहे हों। प्रोग्रामेटिक रूट नेविगेशन का उपयोग करें, जैसा कि उदाहरण routerlinkमें है जो टेम्पलेट में पास होने के बजाय निम्न है :

router.navigate(['/your/router/path'])