מדריך אנגולר | reactive forms – ולידציות וחיווי בUI

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

1. קלאסים של ולידציות ng-pristine ,ng-dirty , ng-touch
2. הוספת HTML לפי ולידציות על שדה, טופס אח חלק מהטופס , formGroup במצבים של valid, invalid
3. שליחת הטופס

קלאסים של ולידציות ng-pristine ,ng-dirty , ng-touch

ישנם מספר קלאסים מובנים שאנגולר מספק במקרה של שדות הקשורים לטפסים. אם תעשו בדוק מרכיב על שדה כלשהו תוכלו לראות אותם, למשל:

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

ng-invalid ng-touched ng-dirty

ושדה שאינו עבר אינטראקיה יהיה בעל הקלאסים הללו:

ng-untouched ng-pristine ng-invalid

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

הוספת HTML לפי ולידציות על שדה, טופס אח חלק מהטופס , formGroup במצבים של valid, invalid

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

  valid: boolean
  invalid: boolean
  errors: ValidationErrors | null
  pristine: boolean
  dirty: boolean
  touched: boolean
  untouched: boolean
   hasError(errorCode: string, path?: string | (string | number)[]): boolean

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

<div class="form-group">
        <label>שם מלא<span class="red-star">*</span></label>
        <input  formControlName="fullName" type="text" value="" placeholder="הקלדו כאן" />
        <span *ngIf="jobRegistrationForm.controls.fullName.invalid && (jobRegistrationForm.controls.fullName.dirty || jobRegistrationForm.controls.fullName.touched)" class="invalid-text"> הזינו שם ושם משפחה</span>
    </div>

הנה דוגמה של חיווי ולידציה על formGroup

 <div class="form-group">
        <label>אימייל<span class="red-star">*</span></label>
        <div [formGroup]="jobRegistrationForm.get('emailForm')" [ngClass]="{'form-not-valid' : jobRegistrationForm.get('emailForm').hasError('emailsAreSame')}" class="inner-group-email">
        <input [ngClass]="{'input-not-valid': jobRegistrationForm.get('emailForm').controls.email.hasError('email')}" formControlName="email" type="email" value=""  placeholder="אימייל לראשונה"/>
        <input [ngClass]="{'input-not-valid': jobRegistrationForm.get('emailForm').controls.reEmail.hasError('email')}" formControlName="reEmail" type="email" value="" placeholder="אימייל בשנית" />
        </div>
        <span *ngIf="jobRegistrationForm.get('emailForm').hasError('emailsAreSame') && (jobRegistrationForm.get('emailForm').controls.email.dirty || jobRegistrationForm.get('emailForm').controls.email.touched)" class="invalid-text"> המיילים אינם זהים</span>
    </div>

ולידציה על שליחת הטופס

שליחת הטופס ובדיקת הולידציה יכולה להיות גם בצד של הUI . למשל כמו שעשינו בדוגמה של הטופס שלנו. על הכפתור שהוא אינו יהיה אקטיבי כל עוד כל הטופס כולו לא ולידי.

    <button [disabled]="jobRegistrationForm.invalid" [ngClass]="{'btn-invalid': jobRegistrationForm.invalid}" class="button-action">אני רוצה!</button>

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

הערה:
יכול להיות ששמתם לב שהוליקציות נכתבות קצת מסורבל. אפשר לכתוב את זה בצורה יותר מסודרת. בעזרת פונקציה שמקבלת ערך של control ומחזירה תשובה בהתאם.

אנחנו כבר לקראת הסוף! – סיכום השיעור

אנחנו כבר לקראת סיום של המיני קורס אנגולר טפסים מגיבים! . מקווים מאד שהמדריך זה עזר להם ולימד אתכם כמה דברים על בניית טפסים. כל עולם הולידציות בHTML הוא שימושי מאד וחוזר על עצמו רבות
מצאו את הדרך הנוחה והברורה ביותר עבוכם להגדיר חיווי לשדות \ טפסים. זכרו שאין דרך אחת מקובלת. זה נתון לבחירתכם ולאופי הטופס שעליו אתם עובדים. אנחנו משתדלים להציג מספר דרכים ואפשרויות לנוחיותכם. בהצלחה ונתראה בשיעור הבא האחרון של מיני קורס זה 🐱‍🐉

פוסטים קשורים:

מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms מדריך אנגולר | reactive forms – הוספת ולידציות מובנות מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס