নিয়মিতভাবে বোতাম ক্লিকের উপর ফর্ম জমা দিতে 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>

ডাব্লু 3 স্পেসিফিকেশন অনুযায়ী:

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

  একটি বোতাম উপাদান সঙ্গে কোনো Type অ্যাট্রিবিউট নিদিষ্ট একটি বাটন একই জিনিস প্রতিনিধিত্ব করে "জমা দিন" তার টাইপ অ্যাট্রিবিউট সেট দিয়ে উপাদান ।

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 এর জন্য ধন্যবাদ ... প্লানক্র.কম

— এডিট

প্রকৃতপক্ষে ! এইটা. এবং আপনি সমস্ত বোতামে সংজ্ঞায়িত করেছেন, তাই এটি উদ্দেশ্য হিসাবে কাজ করছে

— অঙ্কিত সিং

Answer 3

আমি দেখতে পেয়েছি যে ২.০ রিলিজের সাথে পদ্ধতিতে (ngSubmit)একটি nullইভেন্টের মান পাস হচ্ছে তবে পরিবর্তে আমাদের উচিত(submit)

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

আপনার .ts ফাইল

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

Comments

ধন্যবাদ! এটি কাজ করেছে, এনজিউমিট যখন ফর্ম গ্রুপ হিসাবে ব্যবহার না করা হয় তখন কেন কাজ করে, তবে যখন আমি এটি ফর্ম গোষ্ঠী হিসাবে ব্যবহার করি তখন আমাকে আপনার সমাধানটি ব্যবহার করতে হবে

— নিখিল দাস নুমুল

২.০ সবেমাত্র প্রকাশিত হওয়ার পরে আমি এই উত্তরটি কিছুক্ষণ আগে দিয়েছিলাম, তবে এর পরে কৌণিক 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

আপনাকে আপনার @.module.ts- এ '@ কৌনিক / ফর্ম' থেকে ফর্মসমডুল আমদানি করতে হবে

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