Angular8 میں چیک باکس کیسے بنائیں؟

اگر آپ اب تک کسی بھی قسم کی ایپلی کیشنز تیار کررہے ہیں تو ، آپ کو پہلے ہی اس چیک باکس کی بڑی اہمیت سے آگاہ ہے۔ نہ صرف یہ کسی بھی پلیٹ فارم میں اعداد و شمار کی ان پٹ کو آسان بنا دیتا ہے ، بلکہ اعداد و شمار کی جلد چھانٹ میں بھی مدد ملتا ہے کیونکہ یہ اکثر فہرست کی خصوصیت کے ساتھ پیک کیا جاتا ہے۔ اس مضمون میں ، ہم دیکھیں گے کہ درج ذیل ترتیب میں کونیی 8 میں چیک باکس کیسے بنایا جائے:

• Angular8 میں چیک باکس بنائیں
• چیک باکس کی تصدیق کرنا
• ASYnc فارم کنٹرولز کو شامل کرنا

Angular8 میں چیک باکس بنائیں

انگولر 8 میں چیک باکس بنانے کے اقدامات کی وضاحت کرنے کے ل us ، آئیے ہم ایک مثال لے لیں جہاں ہمارے پاس آرڈرز کی فہرست موجود ہے جس میں سے انتخاب کریں اور ہمیں یہ چیک باکس کی صورت میں صارف کے پاس لازمی طور پر کرنا چاہئے۔ اس کے ل. ، نیچے دیے گئے کوڈ پر عمل کریں۔

نقشہ آرڈر ڈیٹا = [{ID: 1 ، نام: 'آرڈر 1'}، {ID: 2، نام: 'آرڈر 2'}، {ID: 3، نام: 'آرڈر 3'}، {ID: 4، نام: 'آرڈر 4'}]

اس معاملے میں ، اعداد و شمار پہلے ہی ہمارے پاس موجود ہیں لہذا ہم نے اوپر مشترکہ کوڈ کا استعمال کیا ہے۔ حقیقی دنیا کے منظر نامے میں ، یہ ڈیٹا زیادہ تر ممکنہ طور پر ایک API کے ذریعے درآمد کیا جائے گا۔

اس مثال میں ، ہم حتمی نتیجہ کو صاف ستھرا اور موثر بنانے کے ل reac رد عملی شکلوں کا استعمال بھی کرسکتے ہیں۔ اس کو سمجھنے کے ل below ، ذیل میں دی گئی مثال پر ایک نظر ڈالیں۔

درآمد کریں {اجزاء 'سے' @ کونیی / بنیادی 'درآمد {فارم بلڈر ، فارم گروپ} سے' @ کونیی / شکلیں '@ اجزاء ({سلیکٹر:' مائی-ایپ '، ٹیمپلیٹ آرل:' ./app.comp ભાગ.html '، اسٹائل یو آر ایل: ['./app.comp ભાગ.css']}) ایکسپورٹ کلاس ایپکمپینٹ {فارم: فارم گروپ آرڈر ڈاٹا = [] کنسٹرکٹر (نجی فارم بلڈر: فارم بلڈر) {this.form = this.formBuilder.group ({آرڈرز: []})} جمع کرائیں() { ... } }

مذکورہ کوڈ میں ، ہم نے درج ذیل کو استعمال کیا ہے۔

تاریخ کے لئے sql ڈیٹا کی قسم

1. فارم گروپس: جو ایک ہی شکل کی نمائندگی کرتا ہے۔
2. فارم کنٹرولر: جو کسی ایک فارم میں واحد اندراج کی نمائندگی کرتا ہے۔
3. فارمآرے: جو تمام فارمکنٹرولس کے مجموعہ کی نمائندگی کرنے کے لئے استعمال ہوتا ہے۔

مذکورہ بالا مثال میں ہم فارم بلڈر سروس کو فارم بنانے کے ل make بھی استعمال کرسکتے ہیں جو کچھ اس طرح نظر آئے گا۔

جمع کرائیں

مذکورہ مثال میں ، ہم نے [formGroup] = 'form' کا استعمال کرکے فارم عنصر کے ساتھ فارم کو باندھ دیا ہے۔

اب جب کہ بنیادی شکل تیار ہوچکی ہے ، آئیے ذیل میں دکھائے گئے فارمیری کے استعمال کے ذریعہ ہم اس میں کچھ حرکیات شامل کریں۔

'@ کونیی / بنیادی' درآمد سے 'اجزاء' درآمد کریں u 'فارمولر بلڈر ، فارم گروپ ، فارم ارای ، فارمکنٹرول ، ValidatorFn' سے '@ کونیی / شکلیں' @ کمپومینٹ ({سلیکٹر: 'میری ایپ' ، ٹیمپلیٹ یو آر ایل: './app.comp برخه .html '، styleUrls: [' ./app.component.css ']}) برآمد کلاس AppComp اجزاء {فارم: فارم گروپ آرڈرڈٹا = [{ID: 100 ، نام:' آرڈر 1 '} ، {ID: 200 ، نام:' آرڈر 2 '}، {ID: 300، نام:' آرڈر 3 '}، {ID: 400، نام:' آرڈر 4 '}] کنسٹرکٹر (نجی فارم بلڈر: فارم بلڈر) {this.form = this.formBuilder.group ({ احکامات: نیا فارمآرے ([])}) this.addCheckboxes ()} نجی addCheckboxes () {this.ordersData.forEach ((o، i) => {const control = new formControl (i === 0) // اگر سب سے پہلے آئٹم کو سچ پر سیٹ کیا گیا ، اور کوئی اور (اس فارمفارم کے بطور (form.rontrols.orders) جھوٹا .پش (کنٹرول)}) (پیش) () {منتخب شدہ آرڈرآڈس = this.form.value.orders .map ((v، i) = > وی؟ اس۔ آرڈرز [i] .id: null) .filter (v => v! == null) کنسول.لاگ (منتخب آرڈرآڈس)}

مذکورہ بالا مثال میں ، ہر لوپ اکرٹریشن کے بعد ہم نے ایک نیا فارمکنٹرول تیار کیا ہے اور فارم آرے سے اپنے آرڈر لئے ہیں۔ ہم نے پہلا کنٹرول صحیح ہونے کے لئے مقرر کیا ہے اور اس طرح پہلے آرڈر کو بطور ڈیفالٹ فہرست سے دور کردیا جاتا ہے۔

اس کے بعد ہمیں آرڈر کی مخصوص معلومات حاصل کرنے کے ل this اس فارمولے عنصر کو اس سانچے میں باندھنا ضروری ہے جو صارف کو ظاہر کرنے کی ضرورت ہے۔

{آرڈر ڈیٹا [i]. نام}} جمع کروائیں

آؤٹ پٹ:

انگولر 8 میں چیک باکس کی توثیق کرنا

چیک باکس کو توثیق کرنے کا طریقہ سیکھنے کے لئے نیچے دی گئی مثال پر ایک نظر ڈالیں۔

{{ਆਰریوں ڈیٹا [i] .name} submit کم از کم ایک آرڈر منتخب کرنا ہوگا جمع کرائیں ... ایکسپورٹ کلاس AppComp اجزاء {فارم: فارم گروپ آرڈرڈٹا = [...] کنسٹرکٹر (نجی فارم بلڈر: فارم بلڈر) {this.form = this.formBuilder . گروپ ({آرڈرز: نیا فارمآر (ی [[] ، منٹ سلیکڈ چیک باکسز (1)).) this.addCheckboxes ()} ... min فنکشن minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: formArray) => { جامد کل منتخب = formArray.controls // چیک باکس اقدار (بولین) کی فہرست حاصل کریں۔ نقشہ (قابو => کنٹرول.یوالیو) // مجموعی طور پر چیک باکسز کی تعداد۔ اریڈ ((اگلا ، اگلا) => اگلا + اگ + اگلا: پچھلا ، 0) // اگر کل کم سے کم سے زیادہ نہ ہو تو ، غلطی کا پیغام واپس کریں کل منتخب کریں> = منٹ؟ منسوخ: {مطلوبہ: سچ}} واپسی کی تصدیق کنندہ}

آؤٹ پٹ:

ASYnc فارم کنٹرولز کو شامل کرنا

اب جب آپ متحرک چیک باکسز کو شامل کرنے کا طریقہ جانتے ہیں ، تو آئیے ہم ان فارموں میں ASYnc کو کس طرح شامل کرسکتے ہیں۔

درآمد کریں @ اجزاء 'سے' @ کونیی / بنیادی 'درآمد، فارم بلڈر ، فارم گروپ ، فارمآرائ ، فارمکنٹرول ، ValidatorFn} سے' @ کونیی / شکلیں 'درآمد {کے r' rxjs '@ اجزاء ({سلیکٹر:' مائی-ایپ '، سانچےآورل: './app.comp ભાગ.html'، اسٹائل یو آر ایلز: ['./app.comp ભાગ.css']}) کلاس برآمد کریں اپ کامکمپینٹ {فارم: فارم گروپ آرڈرڈٹا = [] کنسٹرکٹر (نجی فارم بلڈر: فارم بلڈر) {this.form = this.formBuilder.group ({آرڈرز: نیا formArray ([]، minSelectedCheckboxes (1)) //) // ہم آہنگی کے احکامات this.ordersData = this.getOrders () this.addCheckboxes ()} نجی addCheckboxes () {this.র্ডاٹا۔ forEach ((o، i) => {const control = new formControl (i === 0) // اگر پہلے آئٹم کو سچ پر سیٹ کیا جاتا ہے تو ، اور کوئی جھوٹی (this.form.controls.orders formArray کے طور پر) .پش (کنٹرول) )} getOrders () {return [{id: 100، نام: 'آرڈر 1'}، {ID: 200، نام: 'آرڈر 2'}، {ID: 300، نام: 'آرڈر 3'}، {ID: 400 ، نام: 'آرڈر 4'}]} جمع () {کونٹ منتخب شدہ آرڈرڈس = this.for.value.orders .map ((v، i) => v؟ اس. बॉریڈیٹا [i] .id: null) .filter (v => v! == null) console.log (ਚੁਣਿਆ آرڈرآئیڈس) r} ... درآمد کریں r سے 'rxjs' ... تعمیر کنندہ (نجی فارم بلڈر: فارم بلڈر) {this.form = this. formBuilder.group ({آرڈرز: نیا formArray ([]، minSelectedCheckboxes (1))}) // async احکامات (اس HTTP سروس کال ہوسکتے ہیں) (this.getOrders ()) کے خریداری کریں۔ = آرڈرس this.addCheckboxes ()}) // ہم وقت سازی کے احکامات // this.ordersData = this.getOrders () // this.addCheckboxes ()}

اس کے ساتھ ، ہم اپنے مضمون کے آخر میں پہنچ گئے ہیں۔ اب جب کہ آپ جانتے ہیں کہ اپنے کونیی 8 میں چیک باکس کو کس طرح شامل کرنا ہے ، تو ہم امید کرتے ہیں کہ آپ اپنے کوڈ کوڈ میں ہر دن اس کا استعمال کریں گے۔

جاوا میں tostring کا استعمال کس طرح

اب جب آپ انگولر کے بلڈنگ بلاکس کو جانتے ہیں تو ، چیک کریں بذریعہ ایڈوریکا۔ کونییرا ایک جاوا اسکرپٹ فریم ورک ہے جو اسکیل ایبل ، انٹرپرائز ، اور پرفارمنس کلائنٹ سائڈ ویب ایپلی کیشنز بنانے کے لئے استعمال ہوتا ہے۔ کونیی ڈھانچے کو اپنانے کی حد زیادہ ہونے کی وجہ سے ، درخواست کی کارکردگی کا نظم و ضبط کمیونٹی کے ذریعہ چل رہا ہے جس سے بالواسطہ ملازمت کے بہتر مواقع مائل ہوتے ہیں۔ کونیی سرٹیفیکیشن ٹریننگ کا مقصد انٹرپرائز ایپلیکیشن ڈویلپمنٹ کے آس پاس ان تمام نئے تصورات کا احاطہ کرنا ہے۔