Angular8 এ কিভাবে একটি চেকবক্স তৈরি করবেন?

আপনি যদি এখনও অবধি কোনও ধরণের অ্যাপ্লিকেশন তৈরি করে থাকেন তবে আপনি চেকবক্সের যে বিশাল তাত্পর্য রয়েছে তা আপনি ইতিমধ্যে অবগত আছেন। এটি যে কোনও প্ল্যাটফর্মে কেবলমাত্র ডেটা ইনপুটকে সহজ করে তোলে তা নয়, এটি প্রায়শই তালিকার বৈশিষ্ট্যযুক্ত প্যাকেজে আসে বলে ডেটা দ্রুত বাছাইয়ের সুবিধাও দেয়। এই নিবন্ধে, আমরা নীচের অনুক্রমের কৌণিক 8 এ কীভাবে একটি চেকবক্স তৈরি করতে দেখব:

• Angular8 এ চেকবাক্স তৈরি করুন
• চেকবক্সটি বৈধ করা হচ্ছে
• ASync ফর্ম নিয়ন্ত্রণগুলি যুক্ত করা হচ্ছে

Angular8 এ চেকবাক্স তৈরি করুন

অ্যাঙ্গুলার 8 এ একটি চেকবক্স তৈরি করার পদক্ষেপগুলি ব্যাখ্যা করতে, আসুন আমরা একটি উদাহরণ নিতে পারি যেখানে আমাদের পছন্দের অর্ডারগুলির একটি তালিকা রয়েছে এবং এটি আমাদের অবশ্যই চেকবক্স আকারে ব্যবহারকারীর কাছে করতে হবে। এটি করার জন্য, নীচের কোডটি অনুসরণ করুন।

কমান্ড অর্ডারডাটা = [{আইডি: 1, নাম: 'অর্ডার 1'}, {আইডি: 2, নাম: 'অর্ডার 2'}, {আইডি: 3, নাম: 'অর্ডার 3'}, {আইডি: 4, নাম: 'অর্ডার 4'}]

এই ক্ষেত্রে, ডেটা ইতিমধ্যে আমাদের সাথে উপস্থিত এবং তাই আমরা উপরে ভাগ করা কোডটি ব্যবহার করেছি। একটি বাস্তব বিশ্বের দৃশ্যে, এই ডেটা সম্ভবত কোনও এপিআইয়ের মাধ্যমে আমদানি করা হবে।

এই উদাহরণে, আমরা ফলাফলটি পরিষ্কার এবং কার্যকর করতে প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করতে পারি। এটি কীভাবে করবেন তা বোঝার জন্য নীচের উদাহরণটি দেখুন।

তারিখের জন্য sql ডেটা টাইপ

'@ কৌণিক / মূল' আমদানি থেকে {উপাদান import আমদানি করুন {ফর্মবিল্ডার, ফর্মগ্রুপ 'থেকে @ @ কৌণিক / ফর্ম' @ কমপোজেন্ট ({নির্বাচক: 'মাই-অ্যাপ', টেমপ্লেট ইউআরএল: './app.component.html', স্টাইলআরলস: ['./app.component.css'] export) রফতানি ক্লাস অ্যাপকোম্পোনেন্ট {ফর্ম: ফর্মগ্রুপ অর্ডারডাটা = [] কনস্ট্রাক্টর (প্রাইভেট ফর্ম বিল্ডার: ফর্মবিল্ডার) {this.form = this.formBuilder.group ({অর্ডার: []})} জমা দিন () {...}

উপরের কোডে, আমরা নিম্নলিখিতটি ব্যবহার করেছি।

1. ফর্মগ্রুপস: যা একক রূপকে উপস্থাপন করে।
2. ফর্মকন্ট্রোল: যা একক ফর্মে একক প্রবেশের প্রতিনিধিত্ব করে।
3. ফর্মআরে: যা সমস্ত ফর্মকন্ট্রোলগুলির একটি সংগ্রহ উপস্থাপন করতে ব্যবহৃত হয়।

উপরের উদাহরণে আমরা ফর্ম বিল্ডার পরিষেবাটি ফর্মটি তৈরি করতে ব্যবহার করতে পারি যা এটির মতো দেখতে হবে।

জমা দিন

উপরের উদাহরণে, আমরা [formGroup] = 'ফর্ম' ব্যবহার করে ফর্ম উপাদানটির সাথে ফর্মটি আবদ্ধ করেছি।

এখন যেহেতু মৌলিক ফর্মটি তৈরি করা হয়েছে, আসুন নীচে প্রদর্শিত ফর্মআরির ব্যবহারের মাধ্যমে কিছুটা গতিশীলতা যুক্ত করা যাক।

'@ কৌণিক / মূল' আমদানি থেকে {উপাদান import আমদানি করুন {ফর্মবিল্ডার, ফর্মগ্রুপ, ফর্মআর, ফর্মকন্ট্রোল, ভ্যালিডেটর n থেকে '@ কৌণিক / ফর্ম' @ সংমিশ্রণ ({নির্বাচক: 'আমার অ্যাপ্লিকেশন', টেম্পলেটআরএল: './app.comp घटक .html ', স্টাইলআরলস: [' ./app.componal.css ']}) রফতানি শ্রেণি অ্যাপকোম্পোনটি {ফর্ম: ফর্মগ্রুপ অর্ডারডাটা = [{আইডি: 100, নাম:' আদেশ 1 '}, {আইডি: 200, নাম:' অর্ডার 2 '}, {আইডি: 300, নাম:' অর্ডার 3 '}, {আইডি: 400, নাম:' অর্ডার 4 '}] কনস্ট্রাক্টর (প্রাইভেট ফর্ম বিল্ডার: ফর্মবিল্ডার) {this.form = this.formBuilder.group ({ অর্ডারগুলি: নতুন ফর্মআরাই ([])}) this.addCheckboxes ()} বেসরকারী অ্যাডচেকবক্স () orders this. બોર્ડস ডেটা.ফোর্চ ((ও, i) => {কনট কন্ট্রোল = নতুন ফর্মকন্ট্রোল (i === 0) // যদি প্রথম আইটেমটি সত্য হিসাবে সেট করা হয়েছে, অন্যথায় মিথ্যা (এই.ফর্মএন্ট্রোলস.ফর্মআরাই হিসাবে সীমানা) .পুশ (নিয়ন্ত্রণ)}) (জমা দিন () {নির্বাচিতঅর্ডারআইডস = এই.ফর্ম.ভ্যালু.অর্ডারস। > ভি? এই.অর্ডারস [i] .আইডি: নাল)। ফিল্টার (v => ভি! == নাল) কনসোল.লগ (নির্বাচিত অর্ডারআইডস)}}

উপরের উদাহরণে, প্রতিটি লুপ পুনরাবৃত্তির পরে আমরা একটি নতুন ফর্মকন্ট্রোল তৈরি করেছি এবং ফর্মআরে থেকে আমাদের আদেশ নিয়েছি। আমরা প্রথম নিয়ন্ত্রণটি সত্য বলে সেট করে রেখেছি এবং এভাবে প্রথম অর্ডারটি ডিফল্টরূপে তালিকার বাইরে চলে গেছে।

এর পরে ব্যবহারকারীর কাছে প্রদর্শিত হওয়া নির্দিষ্ট অর্ডার সম্পর্কিত তথ্য পেতে আমাদের এই টেমপ্লেটে ফর্মআরাইয়ের উপাদানটি আবদ্ধ করতে হবে।

{{অর্ডারডাটা [i]। নাম}} জমা দিন

আউটপুট:

Angular8 এ চেকবক্সটি বৈধকরণ করা হচ্ছে

চেকবক্সটি কীভাবে যাচাই করতে হয় তা জানতে নীচের উদাহরণটি দেখুন।

{{অর্ডারডাটা [i]। নাম}} কমপক্ষে একটি আদেশ নির্বাচন করতে হবে জমা দিন ... রফতানি শ্রেণি অ্যাপকোম্পোনটি onent ফর্ম: ফর্মগ্রুপ অর্ডারডাটা = [...] কনস্ট্রাক্টর (প্রাইভেট ফর্ম বিল্ডার: ফর্মবিল্ডার) {this.form = this.forBuilder .গ্রুপ ({অর্ডারগুলি: নতুন ফর্মআরাই ([], মিনিসলেক্টড চেকবক্স (1))।) এই.এডিডিচেকবক্স ()} ...} ফাংশন মিনিসলেক্টড চেকবক্স (মিনিট = 1) {কনডে ভ্যালিডিটার: ভ্যালিডেটারফ্যান = (ফর্মআরে: ফর্মআরে) => { কনটোটোটেলসিলিগ্রেড = ফর্মআরাই.কন্ট্রোল // চেকবক্স মানগুলির একটি তালিকা পান (বুলিয়ান)। মানচিত্র (নিয়ন্ত্রণ => কন্ট্রোল.মূল্য) // মোট পরীক্ষিত চেকবক্সের সংখ্যা .reduce ((পূর্ববর্তী, পরবর্তী) => পরবর্তী? পূর্ব + পরবর্তী: পূর্ব, 0) // যদি মোট সর্বনিম্নের চেয়ে বড় না হয় তবে ত্রুটি বার্তাটি ফিরুন মোটটি নির্বাচন করুন> = মিনিট? নাল: {আবশ্যক: সত্য}} রিটার্ন ভ্যালিডিটার}

আউটপুট:

ASync ফর্ম নিয়ন্ত্রণগুলি যুক্ত করা হচ্ছে

এখন আপনি কীভাবে ডায়নামিক চেকবাক্সগুলি যুক্ত করবেন তা জানেন, আসুন আমরা কীভাবে এই ফর্মগুলিতে এসআইএনসি যুক্ত করতে পারি তা দেখতে দিন।

'@ কৌণিক / কোর' আমদানি থেকে {উপাদান {ফর্মবিল্ডার, ফর্মগ্রুপ, ফর্মআর, ফর্মকন্ট্রোল, ভ্যালিডেটর {এর '@ কৌণিক / ফর্ম' আমদানি করুন r এর 'আরএক্সজেএস' @ সংযোগকারী থেকে (or নির্বাচক: 'আমার-অ্যাপ'), টেম্পলেট ইউআরএল: './app.componal.html', স্টাইলআরলস: ['./app.componal.css'] export) রফতানি শ্রেণি অ্যাপকোম্পোনেন্ট {ফর্ম: ফর্মগ্রুপ অর্ডারডাটা = [] কনস্ট্রাক্টর (প্রাইভেট ফর্ম বিল্ডার: ফর্মবিল্ডার) {this.form = this.formBuilder.group ({অর্ডারগুলি: নতুন ফর্মআরাই ([], মিনিসেলেক্টড চেকবক্স (1)) //) // সিঙ্ক্রোনাস অর্ডারগুলি এই.অর্ডার্সডাটা = this.getOrders () this.addCheckboxes ()} বেসরকারী অ্যাডচেকবক্স () {this.র্ডার ডেটা। forEach ((ও, i) => {কনট কন্ট্রোল = নতুন ফর্মকন্ট্রোল (i === 0) // যদি প্রথম আইটেমটি সত্য হিসাবে সেট করা হয় অন্যথায় মিথ্যা (এই.রফর্ম। )} getOrders () {রিটার্ন [{আইডি: 100, নাম: 'অর্ডার 1'}, {আইডি: 200, নাম: 'অর্ডার 2'}, {আইডি: 300, নাম: 'অর্ডার 3'}, {আইডি: 400, নাম: 'অর্ডার 4'}] (দাখিল () {কনট সিলেক্ট করা অর্ডারআইডস = এই.ফর্ম.ভ্যালু.অর্ডারস। ম্যাপ ((v, i) => ভি? এই.অর্ডারস ডেটা [i] .আইডি: নাল) .ফিল্টার (v => ভি! == নাল) কনসোল.লগ (নির্বাচিত অর্ডারআইডস) 'আরএক্সজেএস' থেকে import '... আমদানি import ... কনস্ট্রাক্টর (প্রাইভেট ফর্ম বিল্ডার: ফর্মবিল্ডার) {this.form = এটি। formBuilder.group ({অর্ডার: নতুন ফর্মআরাই ([], মিনিসেলেক্টড চেকবক্স (1)) //) // এসিঙ্ক অর্ডার (এই পোস্টের অর্ডার ()) এর (একটি HTTP পরিষেবা কল হতে পারে) সাবস্ক্রাইব (অর্ডার => {এটি.অর্ডার ডেটা = অর্ডার করুন এটি.এডডি চেকবক্স ()}) // সিঙ্ক্রোনাস অর্ডারস // এই.অর্ডারসডাটা = this.getOrders () // this.addCheckboxes ()}

এটির সাথে আমরা আমাদের নিবন্ধের শেষে এসেছি। এখন আপনি কীভাবে আপনার কৌনিক 8 এ একটি চেকবাক্স যুক্ত করবেন তা জানেন, আমরা আশা করি আপনি আপনার দিনের বেলা কোডিংয়ে এটি ব্যবহার করবেন।

এখন যেহেতু আপনি কৌনিকটির বিল্ডিং ব্লকগুলি জানেন, সেগুলি দেখুন লিখেছেন এডুরেকা। কৌণিক একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা স্কেলযোগ্য, এন্টারপ্রাইজ এবং পারফরম্যান্স ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। কৌণিক কাঠামোর গ্রহণযোগ্যতা উচ্চ হওয়ায়, অ্যাপ্লিকেশনটির পারফরম্যান্স ম্যানেজমেন্ট হ'ল সম্প্রদায়-পরিচালিত পরোক্ষভাবে আরও ভাল কাজের সুযোগ চালাচ্ছে। কৌণিক শংসাপত্র প্রশিক্ষণের লক্ষ্য এন্টারপ্রাইজ অ্যাপ্লিকেশন বিকাশের চারপাশে এই সমস্ত নতুন ধারণাটি আচ্ছাদন করা।