אז אחרי שהבנתם מהם ולידציות ואיך נראים ולידציות מובנות. בטח חשבתם לעצמכם, או אפילו כבר נתקלתם בכך שלא קיימת ולידציה מובנית למקרה שלכם ושאלתם את עצמכם: "איך אני יוצר ולידציוה משל עצמי?"
אז מזל ששאלתם! בשביל זה בדיוק נועד הפרק הזה במדריך אנגולר שלנו.
הנושאים עליהם נעבור בפרק זה:
ValidatorFn
- איפה לשמור ואיך לקרוא לולידציות שבניתם
- שימוש דינאמי
- סיכום
אציג את הדוגמה של הולידציה בהתאמה אישית שיש לנו בדוגמה
אז הנה כל הקובץ ה typescript של קומפוננטת הטופס שלנו בדוגמה הזו
אפשר לראות בשורה 33 כי מוגדרת אובייקט עם הולידציה שחלה על formGroup של שדות המייל שבודק כי אחד המיילים שווים בשתי הפקדים.
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { customValidatorsForJobForm } from 'src/validators/customValidatorsForJobForm'; @Component({ selector: 'app-form-example', templateUrl: './form-example.component.html', styleUrls: ['./form-example.component.scss'] }) export class FormExampleComponent implements OnInit { public showPrefix : boolean; public prefixList: string[] = ['050','052','053','054','055','056','057']; public dontHaveJobYet: boolean; public jobRegistrationForm : FormGroup; constructor(private fb: FormBuilder) { } ngOnInit(): void { this.jobRegistrationForm = this.fb.group({ fullName: this.fb.control('',[Validators.required , Validators.pattern(/[a-zA-Z]+\s+[a-zA-Z]/)]), phoneForm: this.fb.group({ number: ['',[Validators.required , Validators.pattern('[0-9]{7,20}')]], prefix: ['',Validators.required] }), emailForm : this.fb.group({ email: ['',[Validators.required, Validators.email]], reEmail: ['',[Validators.required, Validators.email]] },{validators: [customValidatorsForJobForm.emailVerified()]}), jobStatus: ['',Validators.required], termsApproved : ['',Validators.required] }); } displayPrefixlist(): void { this.showPrefix = !this.showPrefix; } choosenPrefix(choosen: string): void { this.showPrefix = false; this.jobRegistrationForm.get('phoneForm').get('prefix').setValue(choosen); } checkJobStatus(): void{ this.dontHaveJobYet = !this.jobRegistrationForm.controls.jobStatus.value; if (this.dontHaveJobYet){ this.jobRegistrationForm.addControl('lastDayJob', this.fb.control('', [Validators.required])); }else { this.jobRegistrationForm.removeControl('lastDayJob'); } } submit(form: any) { console.log(form.value); } }
להלן הקובץ של הולידציה בהתאמה אישית, אפשר לראות שכאן מוגדר קלאס שמכיל בתוכו את הולידציה ככה אני יכול לבנות כמה ולידציות באותו קלאס ואז לקרוא להם כמו למשל בדוגמה למעלה בשורה 33 , customValidatorsForJobForm.emailVerified.
אפשר לראות שיש כאן תנאי פשוט מאד שמשווה בין השדות. ובמידה ואין התאמה הפונקציה מחזירה אובייקט עם key לבחירתנו שערכו boolean
import { group } from "@angular/animations"; import { FormControl, FormGroup, ValidatorFn } from "@angular/forms"; export class customValidatorsForJobForm { static emailVerified() : ValidatorFn { return (group: FormGroup)=>{ if(group.controls.email.value !== group.controls.reEmail.value) { return {emailsAreSame : true} }else { return null; } }; } }
1. מה זה ValidatorFn
זהו TYPE שמשתמשים בו להגדיר את מה תחזיר הפונקציה של הולידציה, שזה כמובן ValidatorFn
.
אפשר לראות כאן, כי האינטרפייס שמגדיר את ValidatorFn
. הפונקציה תחזיר null כל עוד הכל תקין בטופס שלכם. אחרת תחזיר אובייקט עם ה key מתאים שיגדיר את השגיאה (את הkey המיוחל אנחנו מגדירים כמובן)
interface ValidatorFn { (control: AbstractControl): ValidationErrors | null }
2. איפה לשמור ואיך לקרוא לולידציות שבניתם
אפשר לשמור את הולידציות שלכם בכל מקום בתכלס אבל מומלץ שיהיה סדר בקבצים של הפרוקט שלכם. אני מציע ליצור תיקיה בתיקיה הראשית app ולקרוא לה validators למשל. שמה תוכלו לשים את כל הווליקציות שלכם. עוד הייתי מציע לבנות קובץ פר טופס עם class ובתוכו להגדיר את הולידציות בהתאמה אישית הקשורות לטופס זה. ברגע שתרצו להשתמש בולידציה בדומה לדוגמה שלנו.
3. שימוש דינאמי בולידטורים שלכם
כפי שראיתם בדוגמה שלי, הולידציה לא כלכך דינאמית , כי מוגדרים שמה שדות קבועים כמו reEmail.
אפשר להגדיר את השדות כך שתעבירו דרך . כל מה שצריך לעשות זה להעביר דרך הפונקציה (שורה 33) את הפרמטרים שתרצו להעביר. למשל : **כמובן להגדיר פרמטרים בפונקציה המקבלת.
customValidatorsForJobForm.emailVerified(’email','reEmail')
סיכום
עולם הולידציות הוא נושא חשוב מאד ויש לו משקל רב בעולם הפיתוח . כמו כן יש הרבה מפתחים שסובלים מזה ולא הכי אוהבים להתעסק עם הדברים הללו כי זה לרוב מלווה בהרבה בדיקות ונסיונות. אבל! זה אולי אחד הדברים הכי מלמדים. וכתנינים שרוצים לכתוב קוד איכותי, אני מציע להתחיל להתנסות ולכתוב ולידציות ותראו שבסוף זה דווקא אתגר מאד מהנה. בהצלחה! 🐱🐉
עוד פוסט בנושא : מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית