כשעושים ולידציה לשדה בטופס מקבלים קוד שאומר האם הולידציה עברה או נכשלה. הקוד הזה נמצא בתוך fieldName.errors.
כל ולידציה היא פונקציה שמקבלת control: AbstractControl ומחזירה ValidationErrors | null.
נניח שאנחנו רוצים לעשות ולידציה לשם משתמש כך שהוא מחרוזת ללא רווחים.
בתוך הקומפוננטה נשים את הפונקציה של הולידציה.
comp.ts
noSpaceAllowed(control: FormControl){
const value = control.value;
if(value != null && value.indexOf(' ') != -1){
return {noSpaceAllowed: true}
}
return null;
}
בהגדרת שדות הטופס, נחבר את פונקצית הולידציה.
comp.ts
firstName: ['', [Validators.required, this.noSpaceAllowed]],
get firstName() {
return this.contactForm.get('presonalDetails.firstName');
}
בטמפלט נשתמש בשדה שהגדרנו ונבדוק את הערך שהפונקציה החזירה על מנת לאתר שגיאות.
comp.html
<span *ngIf="firstName?.errors?.['noSpaceAllowed']">First name is required</span>
Async validator
אנחנו צריכים Async validator כששולחים http request. ולידטור אסינכרוני מחזיר promise או observable.
נניח שאנחנו רוצים לקבל מיילים רק עם סיומת מסויימת ויש לנו ב-DB רשימה של מיילים מותרים.
נגדיר את הפונקציה של הולידציה בתוך קובץ ה-class.
comp.ts
emailNotAllowed(control: FormControl): Promise<any> | Observable<any> {
const response = new Promise((resolve, reject) => {
// Timer to assimulate async action
setTimeout(() => {
if (control.value !== 'service@taxes.gov.il') {
resolve({ emailNotAllowed: true });
} else {
resolve(null);
}
}, 5000);
});
return response;
}
הקריאה לולידטור תהיה ברשימה נפרדת מזו של הולידטורים הרגילים.
comp.ts
email: ['', [Validators.required, Validators.email], this.emailNotAllowed]
Value & status change events
אירוע ValueChange יקרה אם יהיה שינוי בערך של FormCOntrol, FormGroup או FormArray. אנחנו נרשמים לקבל את השינויים בפונקציה OnInit.
comp.ts
this.contactForm.get('message')?.valueChanges.subscribe(value => {
console.log(value);
})
אפשר גם להאזין לשינויים שיש ב-form עצמו.
comp.ts
this.contactForm.valueChanges.subscribe(value => {
console.log(value);
})
לכל form control יש סטטוס. אם שדה אחד הוא invalid, כל הטופס יהיה invalid. כשיש בדיקה של ולידציה, האירוע StatusChanges עולה.
אפשר לחבר את הערכים שמקבלים למשתנים ב-class ולהשתמש בהם.
comp.ts
this.contactForm.statusChanges.subscribe(value => {
console.log(value);
})
Setting values to the form
אפשר לחבר ערכים לשדות של הטופס. המבנה של הפונקציה חייב להתאים למבנה של הטופס.
comp.ts
this.contactForm = this.formBuilder.group({
presonalDetails: this.formBuilder.group({
firstName: ['', [Validators.required, this.noSpaceAllowed]],
lastName: '',
email: ['', [Validators.required, Validators.email], this.emailNotAllowed,],
}),
message: '',
subjects: new FormArray([new FormControl(null)]),
});
שימוש בפונקציה setValue:
comp.ts
this.contactForm.setValue({
presonalDetails: {
firstName: '',
lastName: '',
email: ''
},
message: '',
subjects: []
})
שימוש בפונקציה patchValue להשמה חלקית של הערכים:
comp.ts
this.contactForm.patchValue({
personalDetails: {
firstName: ''
}
})
אפשר לאפס טופס:
comp.ts
this.contactForm.reset({
presonalDetails: {
firstName: '',
lastName: '',
email: ''
},
message: 'Write your message',
subjects: []
})