אז אחד החלקים האומנותיים בעבודה עם טפסים הם הולידציות. אנגולר מציע סט שלכם של ולדציות מובנות שכן הם השימושיות לרוב כגון: required, email , pattern, minLength . ועוד…
אז איך מוסיפים וולידציות לטופס?
אפשר להוסיף ל formControl כל וולידציה שהיא, ישנה אפשרות להוסיף מספר ולידטורים בתוך מערך . להלן דוגמאות ליישום על הטופס שלנו.
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]]
}),
jobStatus: ['',Validators.required],
termsApproved : ['',Validators.required]
});
}אז מה יש לנו פה כרגע:
- required – ולידציה לשדה\לדשות שהוא חובה.
- email – בודק ולידציה של אימייל
- pattern – מאפשר לשים קוד של regexp . בדומה לשורה9 בדוגמה שלי . אפשר לראות שהפאטרן בודק אם השדה מכיל רק מספרים ובין 7-20 לתווים.
ניתן לראות בדוגמה שיש גם ולידציות במערך ויש גם ולדציה אחת לשדה.
עוד אפשר לשים ולידציה על formGroup ולא רק על formControl.
למשל בדוגמה הזו:
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]
});
}ראו בשורה 15 בדוגמה כאן. ישנה ולידציה שקשורה לformGroup. היא ולידציה custom שיצרתי לבדיקת השדות עם השדות של המיילים זהות בערכם. ולכן הולידציה הזו קשורה לformGroup שמכיל שני formControl .
עוד על ולידציות מיוחדות שתרצו לכתוב בעצמכם נדבר בשיעורים הבאים .
סיכום ולידציות מובנות
ולידציות מובנות הם מכסים את המקרים הנפוצים ביותר אז רצוי לבדוק ולחפש לפני שתרשמו ולידציה שאנגולר כבר טיפל בה. בין הגרסאות השונות של אנגולר ישנם יותר או פחות ולידציות מובנות לכן שימו לב על איזה גרסה אתם עובדים וחפשו בהתאם.
נושא הולידציות משפיע גם את התצוגה ואנגולר עשו לנו חיים קלים עם קלאסים שעוזרים לנו להציג חיוויים מתאימים למשתמשים. על זה נתון בשיעור הבא 😀🐱🐉
