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

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

• إنشاء خانة اختيار في Angular8
• التحقق من صحة خانة الاختيار
• إضافة عناصر تحكم نموذج ASync

إنشاء خانة اختيار في 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}}

انتاج:

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

التحقق من صحة خانة الاختيار في 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__ الخاصة بالفئة في