javascript - কৌণিক 2: ফর্ম সংযুক্ত না হওয়ায় ফর্ম জমা দেওয়া বাতিল হয়েছে




html angular (6)

আমার এই সতর্কতা ছিল, আমি বোতামের প্রকারটি "সাবমিট" থেকে "বোতাম" সমস্যার সমাধান করেছি।

আমার একটি মডেল রয়েছে যাতে একটি ফর্ম থাকে, যখন মডেলটি নষ্ট হয়ে যায় আমি কনসোলে নিম্নলিখিত ত্রুটিটি পাই:

ফর্ম সংযুক্ত না থাকায় ফর্ম জমা দেওয়া বাতিল হয়েছে

মডেলটি একটি <modal-placeholder> উপাদানটিতে যুক্ত করা হয়েছে যা আমার শীর্ষ স্তরের উপাদান <app-root> সরাসরি শিশু।

ডোম থেকে কোনও ফর্ম সরানোর এবং কৌণিক 2 এ এই ত্রুটি থেকে মুক্তি পাওয়ার সঠিক উপায় কী? আমি বর্তমানে componentRef.destroy(); ব্যবহার করি componentRef.destroy();


আমি এঙ্গুলার 6 এ দেখছি এমনকি কোনও জমা বোতামও নেই। যখন একই টেমপ্লেটে একাধিক ফর্ম থাকে তখন ঘটে। সমাধান আছে কিনা তা নিশ্চিত নয় / সমাধান কী what


এটি হওয়ার অন্যান্য কারণও থাকতে পারে তবে আমার ক্ষেত্রে আমার কাছে একটি বোতাম ছিল যা ব্রাউজারটি সাবমিট বাটন হিসাবে ব্যাখ্যা করেছিল এবং তাই ত্রুটির কারণে বোতামটি ক্লিক করার সময় ফর্মটি জমা দেওয়া হয়েছিল। টাইপ = "বোতাম" যুক্ত করা সমস্যার সমাধান করেছে। সম্পূর্ণ উপাদান:

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

ফর্ম উপাদানটিতে আপনাকে জমা দেওয়ার পদ্ধতি (এনজিএসবিট) সংজ্ঞায়িত করতে হবে, এর মতো কিছু: <form id="currency-edit" (ngSubmit)="onSubmit(f.value)" #f="ngForm">

এবং জমা বোতামে আপনি ক্লিক পদ্ধতি বাদ দেন, কারণ আপনার ফর্মটি এখন জমা দেওয়ার পদ্ধতির সাথে সংযুক্ত রয়েছে: <button class="btn btn-success" type="submit">Save</button> বোতামটি জমা দেওয়ার ধরণের হওয়া উচিত।

উপাদানগুলির পিছনে কোডটিতে আপনি "onSubmit" পদ্ধতিটি প্রয়োগ করেন, উদাহরণস্বরূপ এরকম কিছু: onSubmit(value: ICurrency) { ... } এই পদ্ধতিটি ফর্ম ক্ষেত্রগুলি থেকে মানগুলির সাথে একটি মান অবজেক্ট গ্রহণ করছে।


ফর্মটি জমা দেওয়ার অংশটি ধ্বংস হওয়ার সাথে সাথে ফর্ম জমা দেওয়ার ক্ষেত্রে, ডিওএম থেকে ফর্মটি বিচ্ছিন্ন করার সাথে সাথে ফর্ম জমা দেওয়ার রেস অবস্থায় ব্যর্থ হয়। বলুন, আমাদের আছে

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

যদি saveData হয় (উদাহরণস্বরূপ এটি এপিআই কলের মাধ্যমে ডেটা সংরক্ষণ করে) তবে আমরা saveData জন্য অপেক্ষা করতে পারি:

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

আপনার যদি অবিলম্বে ফর্মটি ত্যাগ করতে হয়, তবে শূন্য-বিলম্বের পদ্ধতিরও কাজ করা উচিত। এটি ফর্ম জমা দেওয়ার পরে ডওম বিচ্ছিন্নতা পরবর্তী ইভেন্ট লুপ হওয়ার নিশ্চয়তা দেয়:

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

এটি বোতামের ধরণের নির্বিশেষে কাজ করা উচিত।


সুতরাং আমি প্রকৃতপক্ষে আজ ঠিক একই সমস্যার মধ্যে দৌড়েছি একটি মডেল জড়িত ছাড়া। আমার ফর্মে, আমার কাছে দুটি বোতাম রয়েছে। একটি যা ফর্ম জমা দেয় এবং একটি যা ক্লিক করা হলে পূর্ববর্তী পৃষ্ঠায় ফিরে যায়।

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

রাউটারলিঙ্কের সাথে প্রথম বোতামটি ক্লিক করা ঠিক তার ফর্মটি জমা দেওয়ার চেষ্টা করে তবে ফর্মটি জমা দেওয়ার চেষ্টা করে এবং তারপরে ফর্ম জমা দিতে হবে কারণ ফর্মটি যে পৃষ্ঠাটিতে ছিল তা জমা দেওয়ার সময় ডিওএম থেকে আনমাউন্ট করা হয়নি।

এটি পুরো পৃষ্ঠার পরিবর্তে কোনও মডেল ব্যতীত আপনার কাছে ঠিক একই জিনিস হিসাবে দেখা যাচ্ছে be

যদি আপনি সরাসরি দ্বিতীয়টি বোতামের ধরণটি জমা দেওয়া ব্যতীত অন্য কিছু হতে নির্দিষ্ট করে থাকেন তবে সমস্যাটি স্থির হয়ে উঠবে।

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

সুতরাং আপনি যদি 'বাতিল' বাটন বা বাছাইয়ের কোনও কিছুর মাধ্যমে মডেলটি বন্ধ করে দিচ্ছেন, উপরে উল্লিখিত বাটনটির ধরণ উল্লেখ করে আপনার সমস্যাটি সমাধান করা উচিত।





angular-forms