כיצד ליצור תיבת סימון ב- Angular8?

אם יצרת כל סוג של יישומים עד עכשיו, אתה כבר מודע לחשיבות העצומה שיש לתיבת סימון. לא זו בלבד שהיא מקלה על קלט נתונים לכל פלטפורמה, אלא גם מקלה על מיון מהיר של נתונים מכיוון שלעתים קרובות הם מגיעים עם תכונת הרשימה. במאמר זה נראה כיצד ליצור תיבת סימון בזווית 8 ברצף הבא:

• צור תיבת סימון ב- Angular8
• אימות תיבת הסימון
• הוספת בקרות טופס ASync

צור תיבת סימון ב- Angular8

כדי להסביר את השלבים של יצירת תיבת סימון ב- Angular8, ניקח דוגמה שבה יש לנו רשימת הזמנות לבחירה ועלינו לעשות זאת למשתמש בצורת תיבת סימון. לשם כך, עקוב אחר הקוד שלמטה.

const ordersData = [{id: 1, name: 'order 1'}, {id: 2, name: 'order 2'}, {id: 3, name: 'order 3'}, {id: 4, name: 'הזמנה 4'}]

במקרה זה, הנתונים כבר קיימים אצלנו ולכן עשינו שימוש בקוד המשותף לעיל. בתרחיש של עולם אמיתי, נתונים אלה ככל הנראה יובאו באמצעות API.

בדוגמה זו, אנו יכולים גם להשתמש בצורות תגובתיות כדי להפוך את התוצאה הסופית לנקיה ויעילה יותר. על מנת להבין כיצד לעשות זאת, עיין בדוגמה הבאה.

כיצד להשתמש בשיטת הפיצול ב- Java

ייבא את {Component} מ- '@ angular / core' ייבא את {FormBuilder, FormGroup} מ- '@ angular / forms' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) מחלקת ייצוא AppComponent {form: FormGroup ordersData = [] constructor (formBuilder פרטי: FormBuilder) {this.form = this.formBuilder.group ({orders: []})} שלח() { ... } }

בקוד לעיל עשינו שימוש בדברים הבאים.

1. FormGroups: המייצג צורה אחת.
2. FormControl: המייצג כניסה אחת לצורה אחת.
3. FormArray: המשמש לייצוג אוסף של כל FormControls.

בדוגמה שלעיל אנו יכולים גם להשתמש בשירות FormBuilder כדי ליצור את הטופס זה ייראה בערך ככה.

שלח

בדוגמה שלעיל, קשרנו את הטופס עם אלמנט הטופס באמצעות [formGroup] = 'טופס'.

כעת, לאחר שנוצר הטופס הבסיסי, הבה נוסיף קצת דינמיות לאותו דרך שימוש ב- FormArray כפי שמוצג להלן.

ייבא את {Component} מ- '@ angular / core' ייבוא ​​{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:' סדר 2 '}, {id: 300, שם:' order 3 '}, {id: 400, name:' order 4 '}] constructor (private formBuilder: FormBuilder) {this.form = this.formBuilder.group ({ הזמנות: FormArray חדש ([])}) this.addCheckboxes ()} addCheckboxes פרטי () {this.ordersData.forEach ((o, i) => {const control = FormControl new (i === 0) // if הפריט הראשון מוגדר כ- true, אחר שקר (this.form.controls.orders כ- FormArray). push (control)}}} שלח () {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 ()} ...} function minSelectedCheckboxes (min = 1) {const validator: ValidatorFn = (formArray: FormArray) => { const totalSelected = formArray.controls // קבל רשימה של ערכי תיבות סימון (בוליאני) .מפה (control => control.value) // סה'כ את מספר תיבות הסימון המסומנות. להפחית ((הקודם, הבא) => הבא? הקודם + הבא: הקודם, 0) // אם הסך הכל אינו גדול מהמינימום, החזיר את הודעת השגיאה החזר סה'כ נבחר> = דקה? null: {חובה: אמת}} מאמת החזרה}

תְפוּקָה:

הוספת בקרות טופס ASync

כעת, כשתדע להוסיף תיבות סימון דינמיות, הבה נראה כיצד נוכל להוסיף ASync לטפסים אלה.

ייבא את {Component} מ- '@ angular / core' ייבוא ​​{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 = [] constructor (formBuilder פרטי: FormBuilder) {this.form = this.formBuilder.group ({orders: new FormArray ([], minSelectedCheckboxes (1))}) // הזמנות סינכרוני this.ordersData = this.getOrders () this.addCheckboxes ()} addCheckbox פרטי () {this.ordersData. forEach ((o, i) => {const control = FormControl new (i === 0) // אם הפריט הראשון הוגדר ל- true, אחרת שקר (this.form.controls.orders כ- FormArray) .push (control)} )} getOrders () {return [{id: 100, name: 'order 1'}, {id: 200, name: 'order 2'}, {id: 300, name: 'order 3'}, {id: 400, שם: 'סדר 4'}]} שלח () {const selectedOrderIds = this.form.value.orders .map ((v, i) => v? This.ordersData [i]. Id: null) .filter (v => v! == null) console.log (selectedOrderIds)}} ... ייבוא ​​{of} מ- 'rxjs' ... בנאי (formBuilder פרטי: FormBuilder) {this.form = this. formBuilder.group ({orders: FormArray new ([], minSelectedCheckboxes (1))}) // הזמנות async (יכול להיות שיחת שירות http) של (this.getOrders ()). הירשם (orders => {this.ordersData = מזמין this.addCheckboxes ()}) // הזמנות סינכרוניות // this.ordersData = this.getOrders () // this.addCheckboxes ()}

בכך הגענו לסוף המאמר שלנו. כעת, כשתדע להוסיף תיבת סימון ל- angular8 שלך, אנו מקווים שתשתמש בה בקידוד היומיומי שלך.

עכשיו שאתה מכיר את אבני הבניין של Angular, בדוק את מאת אדוריקה. Angular היא מסגרת JavaScript המשמשת ליצירת יישומי אינטרנט ניתנים להרחבה, ארגונית וביצועים בצד הלקוח. עם אימוץ מסגרת זוויתית גבוהה, ניהול הביצועים של היישום מונע בקהילה בעקיפין ומניע הזדמנויות עבודה טובות יותר. אימון ההסמכה הזוויתי נועד לכסות את כל המושגים החדשים הללו סביב פיתוח יישומים ארגוניים.