كيفية إنشاء مربع اختيار في Angular8؟



Checkbox في Angular8 يجعل إدخال البيانات أسهل إلى أي نظام أساسي ويسهل أيضًا الفرز السريع للبيانات لأنها تأتي مع ميزة القائمة.

إذا كنت تقوم بإنشاء أي نوع من التطبيقات حتى الآن ، فأنت تدرك بالفعل الأهمية الكبيرة التي يحملها مربع الاختيار. فهو لا يجعل إدخال البيانات أسهل على أي نظام أساسي فحسب ، بل إنه يسهل أيضًا الفرز السريع للبيانات لأنه غالبًا ما يتم حزمه مع ميزة القائمة. في هذه المقالة ، سنرى كيفية إنشاء مربع اختيار في angular8 بالتسلسل التالي:

إنشاء خانة اختيار في Angular8

لشرح خطوات إنشاء مربع اختيار في Angular8 ، دعنا نأخذ مثالاً حيث لدينا قائمة بالطلبات للاختيار من بينها ويجب علينا ذلك للمستخدم في شكل مربع اختيار. من أجل ذلك ، اتبع الكود أدناه.





طلبات constData = [{id: 1، name: 'order 1'}، {id: 2، name: 'order 2'}، {id: 3، name: 'order 3'}، {id: 4، name: 'طلب 4'}]

في هذه الحالة ، البيانات موجودة بالفعل معنا ، وبالتالي استخدمنا الكود الذي تمت مشاركته أعلاه. في سيناريو العالم الحقيقي ، من المرجح أن يتم استيراد هذه البيانات عبر واجهة برمجة التطبيقات.

في هذا المثال ، يمكننا أيضًا الاستفادة من النماذج التفاعلية لجعل النتيجة النهائية أكثر نظافة وكفاءة. لفهم كيفية القيام بذلك ، ألق نظرة على المثال أدناه.



استيراد {مكون} من استيراد '@ angular / core' {FormBuilder، FormGroup} من '@ angular / Forms'Component ({selector: 'my-app'، templateUrl: './app.component.html'، styleUrls: ['./app.component.css']}) تصدير فئة AppComponent {form: FormGroup ordersData = [] المُنشئ (formBuilder الخاص: FormBuilder) {this.form = this.formBuilder.group ({الطلبات: []})} إرسال() { ... } }

في الكود أعلاه ، استخدمنا ما يلي.

  1. مجموعات النموذج: الذي يمثل شكل واحد.
  2. FormControl: الذي يمثل إدخالًا واحدًا في نموذج واحد.
  3. مصفوفة النموذج: والذي يستخدم لتمثيل مجموعة من كافة عناصر التحكم في النموذج.

في المثال أعلاه ، يمكننا أيضًا الاستفادة من خدمة FormBuilder لإنشاء النموذج الذي سيبدو مثل هذا.

ما هو البديل في جافا
إرسال

في المثال أعلاه ، قمنا بربط النموذج بعنصر النموذج باستخدام [formGroup] = 'form'.



الآن وقد تم إنشاء النموذج الأساسي ، دعنا نضيف بعض الديناميكية إلى نفسه عبر استخدام FormArray كما هو موضح أدناه.

استيراد {Component} من '@ angular / core' import {FormBuilder، FormGroup، FormArray، FormControl، ValidatorFn} من '@ angular / Forms'Component ({selector: 'my-app'، templateUrl: './app.component .html '، styleUrls: [' ./app.component.css ']}) تصدير فئة AppComponent {form: FormGroup ordersData = [{id: 100، name:' order 1 '}، {id: 200، name:' order 2 '}، {id: 300، name:' order 3 '}، {id: 400، name:' order 4 '}] مُنشئ (formBuilder خاص: FormBuilder) {this.form = this.formBuilder.group ({ الطلبات: new FormArray ([])}) this.addCheckboxes ()} addCheckboxes () {this.ordersData.forEach ((o، i) => {const control = new FormControl (i === 0) // إذا تم تعيين العنصر الأول على true ، وإلا false (this.form.controls.orders as FormArray) .push (control)})} submit () {const selectedOrderIds = this.form.value.orders .map ((v، i) = > v؟ this.orders [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}}

في المثال أعلاه ، بعد كل تكرار حلقي ، أنشأنا FormControl جديدًا وأخذنا أوامرنا من FormArray. لقد قمنا بتعيين عنصر التحكم الأول ليكون صحيحًا ، وبالتالي تم إلغاء تحديد الترتيب الأول من القائمة افتراضيًا.

بعد ذلك ، نحتاج إلى ربط عنصر FormArray بهذا القالب من أجل الحصول على معلومات الطلب المحددة التي يجب عرضها للمستخدم.

إرسال {{ordersData [i] .name}}

انتاج:

كيفية عكس السلسلة في بيثون

الإخراج - مربع الاختيار في الزاوية 8- edureka

التحقق من صحة خانة الاختيار في Angular8

ألق نظرة على المثال أدناه لمعرفة كيفية التحقق من صحة مربع الاختيار.

{{ordersData [i] .name}} يجب تحديد طلب واحد على الأقل إرسال ... تصدير فئة AppComponent {form: FormGroup ordersData = [...] المُنشئ (formBuilder الخاص: FormBuilder) {this.form = this.formBuilder .group ({orders: new FormArray ([]، minSelectedCheckboxes (1))}) this.addCheckboxes ()} ...} الوظيفة minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // الحصول على قائمة بقيم خانة الاختيار (منطقية). الخريطة (control => control.value) // إجمالي عدد مربعات الاختيار المحددة. تقليل ((السابق ، التالي) => التالي؟ prev + التالي: prev ، 0) // إذا لم يكن الإجمالي أكبر من الحد الأدنى ، فقم بإرجاع رسالة الخطأ بإرجاع totalSelected> = min؟ خالية: {مطلوب: صحيح}} عودة المدقق}

انتاج:

إضافة عناصر تحكم نموذج ASync

الآن بعد أن عرفت كيفية إضافة مربعات اختيار ديناميكية ، دعنا نرى كيف يمكننا إضافة ASync إلى هذه النماذج.

استيراد {Component} من '@ angular / core' import {FormBuilder، FormGroup، FormArray، FormControl، ValidatorFn} من استيراد '@ angular / Forms' {of} من 'rxjs'Component ({selector: 'my-app'، templateUrl: './app.component.html'، styleUrls: ['./app.component.css']}) تصدير فئة AppComponent {form: FormGroup ordersData = [] المُنشئ (formBuilder الخاص: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([]، minSelectedCheckboxes (1))}) // أوامر متزامنة this.ordersData = this.getOrders () this.addCheckboxes ()} addCheckboxes () {this.ordersData. forEach ((o، i) => {const control = new FormControl (i === 0) // إذا تم تعيين العنصر الأول على true ، وإلا false (this.form.controls.orders as FormArray) .push (control)} )} getOrders () {return [{id: 100، name: 'order 1'}، {id: 200، name: 'order 2'}، {id: 300، name: 'order 3'}، {id: 400، الاسم: 'order 4'}]} أرسل () {const selectedOrderIds = this.form.value.orders .map ((v، i) => v؟ this.ordersData [i] .id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... استيراد {من} من 'rxjs' ... مُنشئ (مُنشئ النموذج الخاص: FormBuilder) {this.form = this. formBuilder.group ({orders: new FormArray ([]، minSelectedCheckboxes (1))}) // أوامر غير متزامنة (يمكن أن تكون استدعاء خدمة http) لـ (this.getOrders ()). Subscribe (orders => {this.ordersData = أوامر this.addCheckboxes ()}) // أوامر متزامنة // this.ordersData = this.getOrders () // this.addCheckboxes ()}

بهذا نكون قد وصلنا إلى نهاية مقالتنا. الآن بعد أن عرفت كيفية إضافة مربع اختيار إلى angular8 الخاص بك ، نأمل أن تستفيد منه في الترميز اليومي.

الآن بعد أن عرفت اللبنات الأساسية لـ Angular ، تحقق من ملف بواسطة Edureka. Angular هو إطار عمل JavaScript يُستخدم لإنشاء تطبيقات ويب قابلة للتطوير ومؤسسة وأداء من جانب العميل. مع اعتماد إطار العمل الزاوي عاليًا ، فإن إدارة أداء التطبيق مدفوعة بالمجتمع بشكل غير مباشر يقود فرص عمل أفضل. يهدف تدريب Angular Certification إلى تغطية كل هذه المفاهيم الجديدة حول تطوير تطبيقات المؤسسة.

في python ، تُستخدم طريقة __init__ الخاصة بالفئة في